:root{
  --bg:#0b1020;
  --panel:#0f1731;
  --panel2:#101a3a;
  --line:#22305a;
  --line2:#2a62b9;
  --text:#e8ecff;
  --muted:rgba(232,236,255,.78);
  --blue:#2b4cff;
  --blue2:#1b3cff;
  --good:#35ff5a;
  --accent:#a78bfa;
  --accent2:#7dd3fc;
  --danger:#ff6b81;
  --warn:#ffb020;
}

*{box-sizing:border-box}
html,body{min-height:100%}

body{
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  margin:0;
  background:
    radial-gradient(circle at top, rgba(68,110,255,.10), transparent 32%),
    linear-gradient(180deg, #07101f 0%, #0b1020 100%);
  color:var(--text)
}

a{color:#9ad;text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:980px;margin:0 auto;padding:24px 18px}
.title{font-size:18px;margin:0;letter-spacing:.3px}
.muted{color:var(--muted)}

.card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  margin:12px 0
}

.flash{background:linear-gradient(180deg,#173a28,#122a1f);border:1px solid #2e7d4a}
.err{background:linear-gradient(180deg,#3a1420,#2a0f18);border:1px solid #7a2b3f}

.row{display:flex;gap:14px;flex-wrap:wrap}

.pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:rgba(26,37,80,.7);
  border:1px solid rgba(44,61,119,.9);
  border-radius:999px;
  padding:8px 12px;
  min-width:240px
}

.pill.warn{border-color:rgba(255,168,0,.85);box-shadow:0 0 0 1px rgba(255,168,0,.25) inset}
.pill.bad{border-color:rgba(255,64,64,.9);box-shadow:0 0 0 1px rgba(255,64,64,.25) inset}

.rate.warn{color:#ffb020}
.rate.bad{color:#ff5a7a}

.pill b{font-weight:700}
.pill .rate{color:#6ad2ff;font-weight:700}
.pill .lvl{color:var(--good);font-weight:800}

.btn{
  background:linear-gradient(180deg,var(--blue),var(--blue2));
  border:0;
  color:white;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700
}

.btn:disabled{opacity:.55;cursor:not-allowed}

input, button{
  font:inherit
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="file"],
input[type="number"],
input:not([type]){
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0b1230;
  color:var(--text);
  outline:none;
}

input:focus{
  border-color:#4d6dff;
  box-shadow:0 0 0 3px rgba(77,109,255,.18);
}

label{
  display:block;
  margin:0 0 8px 0;
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

@media (max-width: 640px){
  .wrap{
    padding:16px 12px;
  }
}