*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--font-sans:"Golos Text","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}body[data-theme=dark]{--bg-page:#060911;--bg-app:#0a0e1a;--bg-header:#0d1424;--bg-card:#121929;--bg-inner:#182238;--border-app:#1e293be6;--border-card:#1e293b;--border-inner:#1e293bcc;--border-subtle:#ffffff14;--text-primary:#fff;--text-secondary:#94a3b8;--text-muted:#64748b;--scrollbar-thumb:#94a3b840;--scrollbar-thumb-hover:#94a3b873;--btn-switch-bg:#1e293bcc;--btn-switch-border:#33415599;--btn-switch-text:#cbd5e1;--chart-grid:#334155;--chart-disconnect:#475569;--tab-active:#3b82f6;--selected-server-bg:#1e3a8a59;--selected-server-border:#3b82f6cc}body[data-theme=light]{--bg-page:#f1f5f9;--bg-app:#f8fafc;--bg-header:#fff;--bg-card:#fff;--bg-inner:#f1f5f9;--border-app:#cbd5e1e6;--border-card:#e2e8f0;--border-inner:#e2e8f0e6;--border-subtle:#00000014;--text-primary:#0f172a;--text-secondary:#64748b;--text-muted:#94a3b8;--scrollbar-thumb:#94a3b866;--scrollbar-thumb-hover:#64748b99;--btn-switch-bg:#fff;--btn-switch-border:#cbd5e1;--btn-switch-text:#334155;--chart-grid:#e2e8f0;--chart-disconnect:#cbd5e1;--tab-active:#2563eb;--selected-server-bg:#eff6ff;--selected-server-border:#3b82f6}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;flex-direction:column;margin:0;padding:0;line-height:1.5;transition:background-color .3s,color .3s;display:flex;overflow:hidden}.app-container{background-color:var(--bg-app);width:100%;height:100dvh;box-shadow:none;border:none;border-radius:0;flex-direction:column;display:flex;position:relative;overflow:hidden}.app-header{border-bottom:1px solid var(--border-card);background-color:var(--bg-header);z-index:20;flex-shrink:0;width:100%;transition:background-color .3s,border-color .3s}.app-header-inner{justify-content:space-between;align-items:center;width:100%;max-width:580px;margin:0 auto;padding:14px 18px;display:flex}.app-brand{align-items:center;gap:10px;display:flex}.app-title-wrap{align-items:center;display:flex}.app-title{letter-spacing:-.02em;color:var(--text-primary);font-size:16px;font-weight:800}.header-actions{align-items:center;gap:8px;display:flex}.status-pill{border:1px solid #0000;border-radius:9999px;align-items:center;gap:6px;padding:4px 10px;font-size:10px;font-weight:700;transition:all .3s;display:inline-flex}.status-pill.connected{color:#10b981;background-color:#10b9811f;border-color:#10b9814d}.status-pill.connecting{color:#3b82f6;background-color:#3b82f61f;border-color:#3b82f64d}.status-pill.disconnected{background-color:var(--bg-inner);border-color:var(--border-inner);color:var(--text-muted)}.status-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px;display:inline-block}.status-pill.connected .status-dot{background-color:#10b981}.status-pill.connecting .status-dot{background-color:#3b82f6;animation:1s linear infinite spin}.status-pill.disconnected .status-dot{background-color:var(--text-muted)}.btn-icon{background-color:var(--bg-inner);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;transition:all .2s;display:flex}.btn-icon:hover{color:var(--text-primary);filter:brightness(1.15)}.btn-icon:active{transform:scale(.94)}.app-content{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb)transparent;flex-direction:column;flex:1;align-items:center;gap:16px;width:100%;padding:16px;display:flex;overflow:hidden auto}.app-content::-webkit-scrollbar{width:5px;height:5px}.app-content::-webkit-scrollbar-track{background:0 0}.app-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:9999px}.app-content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.tab-panel{flex-direction:column;gap:14px;width:100%;max-width:580px;margin:0 auto;display:none}.tab-panel.active{animation:.25s ease-out fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulseGlow{0%,to{opacity:.15;transform:scale(1)}50%{opacity:.3;transform:scale(1.08)}}.card{background-color:var(--bg-card);border:1px solid var(--border-card);border-radius:20px;padding:18px;transition:background-color .3s,border-color .3s;position:relative;overflow:hidden;box-shadow:0 1px 3px #0000000d}.hero-card{text-align:center;flex-direction:column;align-items:center;padding:24px 20px 20px;display:flex}.ambient-glow{filter:blur(50px);pointer-events:none;border-radius:50%;width:220px;height:220px;transition:all .5s;position:absolute;top:-60px}.ambient-glow.connected{background-color:#10b98133}.ambient-glow.connecting{background-color:#3b82f640;animation:1.8s infinite pulseGlow}.ambient-glow.disconnected{background-color:#64748b0f}.status-badge-lg{border:1px solid #0000;border-radius:9999px;align-items:center;gap:6px;margin-bottom:6px;padding:4px 12px;font-size:11px;font-weight:700;display:inline-flex}.status-badge-lg.connected{color:#10b981;background-color:#10b9811f;border-color:#10b98140}.status-badge-lg.connecting{color:#3b82f6;background-color:#3b82f61f;border-color:#3b82f640}.status-badge-lg.disconnected{background-color:var(--bg-inner);border-color:var(--border-inner);color:var(--text-muted)}.status-dot-lg{border-radius:50%;width:8px;height:8px;display:inline-block}.status-badge-lg.connected .status-dot-lg{background-color:#10b981}.status-badge-lg.connecting .status-dot-lg{background-color:#3b82f6;animation:1s linear infinite spin}.status-badge-lg.disconnected .status-dot-lg{background-color:var(--text-muted)}.uptime-timer{font-family:var(--font-mono);letter-spacing:-.02em;color:var(--text-primary);margin-top:2px;font-size:26px;font-weight:700}.connecting-step-text{color:#3b82f6;margin-top:4px;font-size:11px;animation:1.5s infinite pulseGlow}.power-btn-wrapper{justify-content:center;align-items:center;margin:16px 0;display:flex;position:relative}.power-halo{pointer-events:none;border:1px solid #10b9814d;border-radius:50%;width:168px;height:168px;position:absolute}.power-spinner-ring{pointer-events:none;border:4px solid #3b82f633;border-top-color:#3b82f6;border-radius:50%;width:166px;height:166px;animation:1s linear infinite spin;position:absolute}.power-outer-ring{border-radius:50%;justify-content:center;align-items:center;width:146px;height:146px;padding:8px;transition:all .3s;display:flex;box-shadow:0 10px 30px #00000040}.power-outer-ring.connected{background:linear-gradient(135deg,#059669,#0d9488);box-shadow:0 0 35px #10b9814d}.power-outer-ring.connecting{background:linear-gradient(135deg,#2563eb,#6366f1);box-shadow:0 0 35px #3b82f64d}.power-outer-ring.disconnected{background-color:var(--border-inner)}.power-btn{cursor:pointer;border:none;border-radius:50%;outline:none;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:all .25s;display:flex}.power-btn:disabled{cursor:not-allowed;opacity:.9}.power-btn:active:not(:disabled){transform:scale(.95)}.power-btn.connected{color:#fff;background-color:#10b981}.power-btn.connected:hover{background-color:#059669}.power-btn.connecting{color:#fff;background-color:#2563eb}.power-btn.disconnected{background-color:var(--bg-card);color:var(--text-secondary)}body[data-theme=dark] .power-btn.disconnected{background-color:#0f172a}.power-btn-label{text-transform:uppercase;letter-spacing:.08em;margin-top:6px;font-size:10px;font-weight:800}.speed-grid{border-top:1px solid var(--border-card);grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:16px;padding-top:14px;display:grid}.speed-box{background-color:var(--bg-inner);border:1px solid var(--border-inner);text-align:left;border-radius:14px;align-items:center;gap:10px;padding:10px 12px;display:flex}.speed-icon-wrap{border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.speed-icon-wrap.down{color:#10b981;background-color:#10b98126}.speed-icon-wrap.up{color:#3b82f6;background-color:#3b82f626}.speed-meta{flex-direction:column;min-width:0;display:flex}.speed-lbl{color:var(--text-muted);font-size:10px;line-height:1.2}.speed-val-wrap{align-items:baseline;gap:4px;display:flex}.speed-val{color:var(--text-primary);font-size:13px;font-weight:700}.speed-unit{color:var(--text-muted);font-size:9px;font-weight:500}.server-card-preview{cursor:pointer;justify-content:space-between;align-items:center;padding:14px 16px;transition:all .2s;display:flex}.server-card-preview:hover{border-color:#3b82f699}.server-card-preview:active{transform:scale(.99)}.server-preview-left{align-items:center;gap:12px;min-width:0;display:flex}.server-preview-info{flex-direction:column;gap:2px;min-width:0;display:flex}.server-preview-tag{text-transform:uppercase;letter-spacing:.06em;color:#3b82f6;font-size:10px;font-weight:800;line-height:1.2;display:block}.server-preview-name{color:var(--text-primary);font-size:13px;font-weight:700;line-height:1.3;display:block}.server-preview-sub{color:var(--text-secondary);font-size:11px;line-height:1.3;display:block}.server-preview-ping{color:#10b981;font-weight:600}.btn-change-server{color:#2563eb;cursor:pointer;background-color:#2563eb26;border:none;border-radius:10px;padding:6px 12px;font-size:12px;font-weight:700;transition:background-color .2s}.btn-change-server:hover{background-color:#2563eb40}.params-card{flex-direction:column;gap:10px;padding:14px 16px;display:flex}.param-row{justify-content:space-between;align-items:center;font-size:12px;display:flex}.param-lbl{color:var(--text-secondary)}.param-val{color:var(--text-primary);align-items:center;gap:6px;font-weight:600;display:flex}.param-val.mono{font-family:var(--font-mono);font-weight:700}.param-val.green{color:#10b981}.btn-copy{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;padding:3px;transition:all .2s;display:flex}.btn-copy:hover{color:var(--text-primary);background-color:var(--bg-inner)}.params-card-title{color:var(--text-primary);border-bottom:1px solid var(--border-card);padding-bottom:8px;font-size:12px;font-weight:700;display:block}.toggles-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.toggle-card{justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;display:flex}.toggle-meta{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.toggle-title{color:var(--text-primary);font-size:12px;font-weight:700;line-height:1.35;display:block}.toggle-desc{color:var(--text-muted);font-size:10px;line-height:1.35;display:block}.switch{background-color:var(--border-inner);cursor:pointer;border:none;border-radius:9999px;flex-shrink:0;width:40px;height:24px;transition:background-color .2s;position:relative}.switch.active{background-color:#2563eb}.switch-thumb{background-color:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s cubic-bezier(.4,0,.2,1);position:absolute;top:4px;left:4px;box-shadow:0 1px 3px #0000004d}.switch.active .switch-thumb{transform:translate(16px)}.search-bar{width:100%;position:relative}.search-icon{color:var(--text-muted);pointer-events:none;position:absolute;top:12px;left:14px}.search-input{background-color:var(--bg-card);border:1px solid var(--border-card);width:100%;color:var(--text-primary);border-radius:16px;outline:none;padding:10px 14px 10px 40px;font-size:12px;font-weight:500;transition:all .2s}.search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}.search-input::placeholder{color:var(--text-muted)}.chips-row{scrollbar-width:none;align-items:center;gap:6px;padding-bottom:4px;display:flex;overflow-x:auto}.chips-row::-webkit-scrollbar{display:none}.chip-btn{white-space:nowrap;background-color:var(--bg-inner);color:var(--text-secondary);cursor:pointer;border:1px solid #0000;border-radius:12px;padding:6px 14px;font-size:12px;font-weight:600;transition:all .2s}.chip-btn:hover{color:var(--text-primary);background-color:var(--border-inner)}.chip-btn.active{color:#fff;background-color:#2563eb;box-shadow:0 2px 6px #2563eb40}.server-list{flex-direction:column;gap:8px;display:flex}.server-item{border:1px solid var(--border-card);background-color:var(--bg-card);cursor:pointer;border-radius:16px;justify-content:space-between;align-items:center;padding:12px 14px;transition:all .2s;display:flex}.server-item:hover{border-color:#3b82f680}.server-item.selected{background-color:var(--selected-server-bg);border-color:var(--selected-server-border)}.server-item:active{transform:scale(.99)}.server-item-left{align-items:center;gap:12px;min-width:0;display:flex}.server-item-info{flex-direction:column;min-width:0;display:flex}.server-flag-wrap{border:1px solid #00000026;border-radius:4px;flex-shrink:0;width:28px;height:20px;overflow:hidden}.server-item-name-wrap{align-items:center;gap:6px;display:flex}.server-item-name{color:var(--text-primary);font-size:12px;font-weight:700}.optimal-badge{color:#10b981;background-color:#10b9812e;border-radius:3px;padding:1px 5px;font-size:9px;font-weight:700}.server-item-meta{color:var(--text-muted);align-items:center;gap:6px;margin-top:2px;font-size:11px;display:flex}.server-item-ip{font-family:var(--font-mono)}.server-item-right{align-items:center;gap:12px;display:flex}.server-load-box{text-align:right;display:none}@media (width>=480px){.server-load-box{display:block}}.server-load-num{color:var(--text-muted);font-size:10px;display:block}.server-load-bar-wrap{background-color:var(--border-inner);border-radius:9999px;width:48px;height:5px;margin-top:2px;overflow:hidden}.server-load-bar{border-radius:9999px;height:100%}.server-check-circle{border:1px solid var(--border-inner);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.server-item.selected .server-check-circle{color:#fff;background-color:#2563eb;border-color:#2563eb}.empty-servers{text-align:center;color:var(--text-muted);padding:48px 16px;font-size:12px}.chart-card{flex-direction:column;gap:10px;padding:16px;display:flex}.chart-header{justify-content:space-between;align-items:center;display:flex}.chart-title-left{align-items:center;gap:8px;display:flex}.chart-icon-box{color:#10b981;background-color:#10b98126;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.chart-title-info{flex-direction:column;gap:2px;min-width:0;display:flex}.chart-title{color:var(--text-primary);font-size:12px;font-weight:700;line-height:1.35;display:block}.chart-subtitle{color:var(--text-muted);font-size:10px;line-height:1.35;display:block}.live-badge{color:#10b981;align-items:center;gap:5px;font-size:10px;font-weight:600;display:inline-flex}.live-dot{background-color:#10b981;border-radius:50%;width:6px;height:6px;animation:1.5s infinite pulseGlow}.chart-svg-container{background:linear-gradient(#0000,#94a3b80d);border-radius:14px;width:100%;padding-top:6px;overflow:hidden}.chart-svg{width:100%;height:128px;display:block}.chart-legend{justify-content:space-between;align-items:center;padding:4px 8px;font-size:10px;display:flex}.chart-legend-left{align-items:center;gap:12px;display:flex}.legend-item{color:var(--text-secondary);align-items:center;gap:5px;display:flex}.legend-dot-down{background-color:#10b981;border-radius:2px;width:8px;height:8px}.legend-line-up{background-color:#3b82f6;width:10px;height:2px}.legend-ping{font-family:var(--font-mono);color:var(--text-muted);font-size:9px}.chart-stats-summary{border-top:1px solid var(--border-card);grid-template-columns:1fr 1fr;gap:10px;padding-top:10px;display:grid}.stat-summary-box{background-color:var(--bg-inner);text-align:center;border-radius:12px;padding:8px}.stat-summary-lbl{color:var(--text-muted);font-size:9px;display:block}.stat-summary-val{font-family:var(--font-mono);color:var(--text-primary);margin-top:2px;font-size:12px;font-weight:700}.stat-summary-val.green{color:#10b981}.data-transfer-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.data-transfer-card{padding:16px}.data-transfer-header{align-items:center;gap:6px;margin-bottom:4px;font-size:11px;font-weight:700;display:flex}.data-transfer-header.down{color:#10b981}.data-transfer-header.up{color:#3b82f6}.data-transfer-val{color:var(--text-primary);font-size:18px;font-weight:800;display:block}.data-transfer-sub{color:var(--text-muted);margin-top:2px;font-size:10px;display:block}.settings-section-title{text-transform:uppercase;letter-spacing:.06em;color:#3b82f6;margin-bottom:10px;font-size:11px;font-weight:800;display:block}.theme-choice-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.theme-choice-btn{border:1px solid var(--border-card);background-color:var(--bg-inner);cursor:pointer;color:var(--text-primary);text-align:left;border-radius:14px;align-items:center;gap:10px;padding:12px;transition:all .2s;display:flex}.theme-choice-btn:hover{filter:brightness(1.1)}.theme-choice-btn.active{background-color:var(--selected-server-bg);border-color:#2563eb;box-shadow:0 2px 8px #2563eb33}.theme-choice-text-wrap{flex-direction:column;gap:2px;min-width:0;display:flex}.theme-choice-name{font-size:12px;font-weight:700;line-height:1.35;display:block}.theme-choice-sub{color:var(--text-muted);font-size:10px;line-height:1.35;display:block}.protocol-list{flex-direction:column;gap:8px;display:flex}.protocol-item{border:1px solid var(--border-inner);background-color:var(--bg-inner);cursor:pointer;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;padding:12px;transition:all .2s;display:flex}.protocol-item:hover{border-color:#3b82f666}.protocol-item.active{background-color:var(--selected-server-bg);border-color:#2563eb}.protocol-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.protocol-name{color:var(--text-primary);font-size:12px;font-weight:700;line-height:1.35;display:block}.protocol-desc{color:var(--text-muted);font-size:10px;line-height:1.35;display:block}.radio-circle{border:1px solid var(--text-muted);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;display:flex}.protocol-item.active .radio-circle{background-color:#2563eb;border-color:#2563eb}.radio-inner-dot{background-color:#fff;border-radius:50%;width:6px;height:6px}.settings-toggle-row{justify-content:space-between;align-items:center;gap:16px;padding:12px 0;display:flex}.settings-toggle-row:not(:last-child){border-bottom:1px solid var(--border-card)}.app-info-card{text-align:center;flex-direction:column;align-items:center;gap:6px;padding:16px;display:flex}.app-info-brand{color:var(--text-primary);align-items:center;gap:8px;font-size:13px;font-weight:800;display:flex}.app-info-ver{color:var(--text-muted);font-size:11px}.app-info-status{color:#10b981;font-size:10px;font-weight:600}.app-nav{border-top:1px solid var(--border-card);background-color:var(--bg-header);z-index:20;flex-shrink:0;width:100%;transition:background-color .3s,border-color .3s}.app-nav-inner{justify-content:space-around;align-items:center;width:100%;max-width:580px;margin:0 auto;padding:8px 16px;display:flex}.nav-item{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:12px;flex-direction:column;align-items:center;padding:4px 12px;transition:all .2s;display:flex}.nav-item:hover{color:var(--text-primary)}.nav-item.active{color:var(--tab-active);font-weight:700;transform:scale(1.05)}.nav-icon{width:20px;height:20px}.nav-lbl{margin-top:3px;font-size:10px}@media (width>=768px){.app-header-inner{max-width:620px;padding:16px 20px}.app-title{font-size:18px}.app-content{gap:18px;padding:20px 24px}.tab-panel{gap:18px;max-width:620px}.card{border-radius:22px;padding:22px}.power-outer-ring{width:156px;height:156px}.power-halo{width:180px;height:180px}.power-spinner-ring{width:178px;height:178px}.uptime-timer{font-size:30px}.app-nav-inner{max-width:620px;padding:10px 20px}.nav-item{padding:6px 18px}.nav-icon{width:22px;height:22px}.nav-lbl{font-size:11px}}