*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--bg:#030512;--card:#0f152dd9;--card-inner:#141c37bf;--border:#4664b42e;--blue:#2b7bff;--blue-glow:#2b7bff8c;--text:#fff;--muted:#6b7ba0}html,body{min-height:100%}body{background:var(--bg);color:var(--text);flex-direction:column;align-items:center;min-height:100vh;padding:24px 16px 40px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;display:flex;position:relative;overflow-x:hidden}body:before{content:"";z-index:-1;background:radial-gradient(60% 40% at 50% 30%,#2b7bff2e,#0000 60%),radial-gradient(40% 30% at 50% 80%,#2b7bff1a,#0000 60%),linear-gradient(#030512 0%,#060a1e 45%,#030512 100%);position:fixed;inset:0}.app-card{background:var(--card);border:1px solid var(--border);-webkit-backdrop-filter:blur(20px);border-radius:28px;flex-direction:column;align-items:center;width:100%;max-width:420px;padding:28px 24px 32px;display:flex;box-shadow:0 30px 60px #0009,0 0 40px #2b7bff1a,inset 0 1px #ffffff0a}.logo{justify-content:center;align-items:center;gap:10px;margin-bottom:28px;display:flex}.logo-badge{background:linear-gradient(135deg,#2b7bff,#1a4fd6);border-radius:12px;place-items:center;width:40px;height:40px;display:grid;box-shadow:0 0 20px #2b7bff73}.logo-badge svg{width:24px;height:24px}.logo-text{letter-spacing:-.02em;font-size:22px;font-weight:800}.logo-text .accent{background:linear-gradient(90deg,#5aa0ff,#2b7bff);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.status-card{background:var(--card-inner);border:1px solid var(--border);border-radius:16px;align-items:center;gap:14px;width:100%;margin-bottom:26px;padding:18px 20px;transition:border-color .3s,background .3s;display:flex}.status-card.on{background:#0f37288c;border-color:#34d3998c}.status-card.connecting{background:#1428508c;border-color:#2b7bff8c}.status-dot{background:#8a94b3;border-radius:50%;flex-shrink:0;width:14px;height:14px;transition:background .3s,box-shadow .3s;box-shadow:0 0 8px #8a94b359}.status-card.on .status-dot{background:#34d399;box-shadow:0 0 12px #34d399b3}.status-card.connecting .status-dot{background:#5aa0ff;animation:1s ease-in-out infinite dot-pulse;box-shadow:0 0 12px #5aa0ffb3}@keyframes dot-pulse{0%,to{opacity:1}50%{opacity:.35}}.status-body{flex:1}.status-label{letter-spacing:.14em;color:var(--muted);margin-bottom:4px;font-size:11px;font-weight:600;transition:color .3s}.status-card.on .status-label{color:#34d399}.status-card.connecting .status-label{color:#5aa0ff}.status-text{font-size:17px;font-weight:700}.group{width:100%;margin-bottom:18px}.group-label{letter-spacing:.14em;color:var(--muted);margin-bottom:10px;padding-left:4px;font-size:11px;font-weight:600}.select-btn{background:var(--card-inner);border:1px solid var(--border);width:100%;color:inherit;font:inherit;cursor:pointer;border-radius:14px;align-items:center;gap:12px;padding:14px 16px;transition:border-color .2s,background .2s;display:flex}.select-btn:hover{background:#2b7bff0f;border-color:#2b7bff59}.select-btn .icon{border-radius:4px;flex-shrink:0;place-items:center;width:28px;height:20px;display:grid;overflow:hidden}.select-btn .icon.proto{color:#5aa0ff;width:22px;height:22px}.flag-de{background:linear-gradient(#000 0 33%,#d00 33% 66%,#ffce00 66%);width:100%;height:100%}.select-btn .name{flex:1;font-size:15px;font-weight:600}.select-btn .caret{color:var(--muted);opacity:.7}.power-wrap{flex-direction:column;align-items:center;width:100%;margin-top:12px;display:flex}.power-btn{cursor:pointer;background:radial-gradient(circle,#2b7bff24,#2b7bff08);border:2px solid #2b7bff80;border-radius:50%;place-items:center;width:132px;height:132px;margin-bottom:16px;transition:transform .15s ease-out,box-shadow .35s,background .35s,border-color .35s;animation:2.4s ease-in-out infinite pulse;display:grid;position:relative;box-shadow:0 0 30px #2b7bff59,inset 0 0 30px #2b7bff26}@keyframes pulse{0%,to{box-shadow:0 0 30px #2b7bff59,inset 0 0 30px #2b7bff26}50%{box-shadow:0 0 55px #2b7bff8c,inset 0 0 40px #2b7bff38}}.power-btn:active{transform:scale(.94);box-shadow:0 0 20px #2b7bff4d}.power-btn:before{content:"";border:1px solid #2b7bff47;border-radius:50%;transition:border-color .35s;position:absolute;inset:8px}.power-btn svg{color:#4c95ff;filter:drop-shadow(0 0 8px #4c95ffb3);width:56px;height:56px;transition:color .35s,filter .35s,transform .35s}.power-btn.connecting{animation:1.1s ease-in-out infinite pulse}.power-btn.connecting svg{animation:1.1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.power-btn.on{background:radial-gradient(circle,#34d39938,#34d3990d);border-color:#34d399bf;animation:2.4s ease-in-out infinite pulse-on;box-shadow:0 0 40px #34d3998c,inset 0 0 30px #34d3992e}.power-btn.on:before{border-color:#34d39966}.power-btn.on svg{color:#34d399;filter:drop-shadow(0 0 10px #34d399d9)}@keyframes pulse-on{0%,to{box-shadow:0 0 40px #34d3998c,inset 0 0 30px #34d3992e}50%{box-shadow:0 0 65px #34d399bf,inset 0 0 40px #34d39940}}.power-hint{color:var(--muted);text-align:center;max-width:240px;font-size:13px;line-height:1.55;transition:color .3s}.power-hint.on{color:#34d399}@media (width<=420px){.app-card{border-radius:24px;padding:24px 18px 26px}.logo-badge{width:36px;height:36px}.logo-badge svg{width:20px;height:20px}.logo-text{font-size:20px}.power-btn{width:118px;height:118px}.power-btn svg{width:48px;height:48px}}