:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;font:16px/1.45 system-ui,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a}}*{box-sizing:border-box}html,body{height:100%}body{color:var(--text);background:var(--bg);margin:0}#root{justify-content:center;align-items:center;min-height:100svh;display:flex}h1,h2{color:var(--text-h);margin:0}.app{width:100%;max-width:640px;padding:1.5rem;font-family:system-ui,sans-serif}.app-header{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.app-header h1{margin:0;font-size:1.1rem}.ws-indicator{white-space:nowrap;border-radius:999px;padding:.15rem .6rem;font-size:.75rem}.ws-indicator.connected{color:#16a34a;background:#22c55e2e}.ws-indicator.disconnected{color:#dc2626;background:#ef44442e}.warning{color:#b45309;background:#f59e0b26;border-radius:6px;margin:0 0 .75rem;padding:.5rem .75rem;font-size:.85rem}.badges{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem;margin-bottom:1rem;display:grid}.badge{background:#7f7f7f1a;border-radius:8px;flex-direction:column;gap:.2rem;padding:.6rem .75rem;display:flex}.badge-label{text-transform:uppercase;letter-spacing:.04em;opacity:.65;font-size:.7rem}.badge-value{font-size:.95rem;font-weight:600}.badge-value.tone-ok{color:#16a34a}.badge-value.tone-off{color:#dc2626}.vpn-link-card{color:#2563eb;background:#2563eb24;border:1px solid #2563eb66;border-radius:10px;align-items:center;gap:.75rem;margin-bottom:1rem;padding:.75rem 1rem;text-decoration:none;transition:background .2s,transform .1s;display:flex}.vpn-link-card:hover{background:#2563eb38}.vpn-link-card:active{transform:scale(.99)}.vpn-link-icon,.vpn-link-arrow{flex-shrink:0}.vpn-link-arrow{opacity:.7}.vpn-link-text{flex-direction:column;flex:1;min-width:0;display:flex}.vpn-link-title{font-size:.95rem;font-weight:700}.vpn-link-ip{opacity:.8;font-size:.8rem}.version-box{background:#7f7f7f1a;border-radius:8px;margin-bottom:1rem;padding:.6rem .75rem}.version-box-title{text-transform:uppercase;letter-spacing:.04em;opacity:.65;margin-bottom:.4rem;font-size:.7rem;display:block}.version-box-empty{margin:0;font-size:.95rem;font-weight:600}.version-grid{grid-template-columns:auto 1fr;gap:.25rem .75rem;margin:0;display:grid}.version-row{display:contents}.version-row dt{opacity:.7;font-size:.8rem}.version-row dd{text-align:right;word-break:break-word;margin:0;font-size:.85rem;font-weight:600}.actions{flex-wrap:wrap;gap:.6rem;display:flex}.actions button{cursor:pointer;border:1px solid #0000;border-radius:8px;flex:auto;justify-content:center;align-items:center;gap:.4rem;min-width:110px;padding:.6rem 1rem;font-size:.9rem;font-weight:600;transition:opacity .2s;display:inline-flex}.actions button:disabled{opacity:.5;cursor:not-allowed}.actions button:disabled:has(.spinner){opacity:.85;cursor:wait}.spinner{border:2px solid;border-top-color:#0000;border-radius:50%;width:14px;height:14px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.btn-yellow{color:#a16207;background:#eab30829;border-color:#eab30866}.btn-green{color:#16a34a;background:#22c55e29;border-color:#22c55e66}.btn-red{color:#dc2626;background:#ef444429;border-color:#ef444466}.error{color:#dc2626;margin-top:.75rem;font-size:.85rem}.last-response{opacity:.75;margin-top:.75rem;font-size:.85rem}.help-card{background:#3b82f614;border:1px solid #3b82f640;border-radius:10px;margin-top:1.25rem;padding:1rem}.help-header{color:#2563eb;align-items:center;gap:.5rem;margin-bottom:.85rem;font-size:.9rem;font-weight:700;display:flex}.help-steps{flex-direction:column;gap:.7rem;margin:0;padding:0;list-style:none;display:flex}.help-steps li{align-items:flex-start;gap:.6rem;display:flex}.help-step-icon{color:#2563eb;background:#2563eb29;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;display:flex}.help-step-text{font-size:.85rem;line-height:1.45}.help-step-text code{background:#7f7f7f2e;border-radius:4px;padding:.1rem .35rem;font-size:.8rem}.help-download-btn{color:#fff;background:#2563eb;border-radius:6px;align-items:center;margin-top:.4rem;padding:.35rem .75rem;font-size:.8rem;font-weight:600;text-decoration:none;display:inline-flex}.help-download-btn:hover{background:#1d4ed8}