*{margin:0;padding:0;box-sizing:border-box;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body{
  min-height:100vh;
  background:radial-gradient(1200px 600px at 50% -10%, #3a0066, #0a0014 60%);
  color:#fff;font-family:system-ui,Segoe UI,Arial;
}
.hidden{display:none}

/* Install bar */
.install-bar{
  position:sticky;top:0;z-index:9;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;background:#120024cc;backdrop-filter:blur(8px);
  border-bottom:1px solid #6a00ff66
}
.install-actions{display:flex;gap:8px}
.pill{padding:8px 14px;border-radius:999px;border:1px solid #6a00ff;
  background:#6a00ff;color:#fff}
.close{background:transparent;border:none;color:#fff;font-size:18px}

/* Cards */
.card{max-width:380px;margin:18px auto;padding:18px;border-radius:20px}
.glass{
  background:linear-gradient(180deg, #1a0033aa, #120024aa);
  backdrop-filter:blur(12px);
  border:1px solid #6a00ff55;
  box-shadow:0 0 24px #6a00ff66;
}

/* Login */
h1{font-size:22px;margin-bottom:6px}
.sub{opacity:.85;margin-bottom:10px}
input{
  width:100%;padding:14px;border-radius:14px;border:1px solid #6a00ff66;
  background:#0f001f;color:#fff;outline:none
}
.primary,.secondary{
  display:block;width:100%;text-align:center;
  margin-top:10px;padding:14px;border-radius:14px;border:none;
  transition:.25s transform,.25s box-shadow
}
.primary{background:#6a00ff;color:#fff}
.primary:hover{transform:translateY(-1px);box-shadow:0 0 18px #6a00ff}
.secondary{background:#1a0033;color:#fff;border:1px solid #6a00ff66}
.msg{min-height:18px;margin-top:6px;color:#ff6b6b}

.divider{
  height:1px;margin:14px 0;
  background:linear-gradient(90deg, transparent,#6a00ff,transparent)
}
.foot{opacity:.8;text-align:center}
.small{opacity:.6;font-size:12px}

/* Socials */
.socials{display:flex;gap:10px;justify-content:center;margin-top:10px}
.soc{
  display:flex;gap:8px;align-items:center;
  padding:10px 14px;border-radius:14px;
  border:1px solid #6a00ff66;background:#140028;color:#fff
}
.soc svg{width:18px;height:18px;fill:#9b7bff}

/* Panel */
.top{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;gap:8px;align-items:center}
.icon{width:22px;height:22px;stroke:#b08cff;fill:none;stroke-width:2}
.status{display:flex;gap:6px;align-items:center}
.status i{
  width:8px;height:8px;border-radius:50%;background:#2cff9b;
  box-shadow:0 0 10px #2cff9b;animation:pulse 1.6s infinite
}
@keyframes pulse{50%{opacity:.5}}

.tabs{display:flex;gap:10px;margin:14px 0}
.tabBtn{
  flex:1;padding:10px;border-radius:14px;border:1px solid #6a00ff66;
  background:#140028;transition:.25s
}
.tabBtn svg{width:22px;height:22px;fill:#9b7bff}
.tabBtn.active{box-shadow:0 0 16px #6a00ff}

.content{max-height:58vh;overflow:auto;padding-right:4px}
.content::-webkit-scrollbar{width:0}

h2{margin-bottom:6px}
.row,.radio{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 6px
}

/* Switch */
.switch{position:relative;width:44px;height:24px}
.switch input{display:none}
.switch i{
  position:absolute;inset:0;border-radius:999px;
  background:#2a2a2a;transition:.25s
}
.switch i:after{
  content:"";position:absolute;left:3px;top:3px;
  width:18px;height:18px;border-radius:50%;background:#999;transition:.25s
}
.switch input:checked + i{background:#6a00ff}
.switch input:checked + i:after{left:23px;background:#fff}

/* Range */
.range input{width:100%}

/* Inject */
.ff{
  width:100%;margin:6px 0;padding:14px;border-radius:14px;
  border:1px solid #6a00ff66;background:#1a0033;color:#fff
}
.statusBox{
  padding:12px;border-radius:14px;text-align:center;
  border:1px dashed #6a00ff66
}
.info{margin-top:8px;padding:10px;border-radius:12px;
  background:#140028;border:1px solid #6a00ff66}

#particles{
  position:fixed;
  inset:0;
  z-index:-1;
}

.btn-touch:active{
  transform:scale(.96);
}