:root {
  color-scheme:dark;
  --bg:#090817;
  --panel:#14112a;
  --cyan:#28f0ff;
  --pink:#ff4cbd;
  --purple:#b76bff;
  --text:#e8e7fa;
}
* { box-sizing:border-box; }
body {
  margin:0;
  background:
    radial-gradient(ellipse at 15% 0%,#40145155,transparent 45%),
    radial-gradient(ellipse at 90% 20%,#063b5355,transparent 45%),
    var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.5;
}
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:24px 5%;
  border-bottom:1px solid #8545bc;
}
h1 {
  font-size:clamp(2rem,5vw,3.5rem);
  letter-spacing:3px;
  color:var(--cyan);
  text-shadow:0 0 20px #28f0ff88;
  margin:5px 0;
}
h1 span {color:var(--pink);text-shadow:0 0 20px #ff4cbd88;}
h2 {color:var(--cyan);font-size:1.15rem;letter-spacing:1px;}
h3 {color:var(--purple);}
main {max-width:1450px;margin:auto;padding:28px 4%;}
.eyebrow {color:#b8a6e9;font-size:.75rem;letter-spacing:2px;}
.panel {
  background:linear-gradient(135deg,#19142f,#100f22);
  border:1px solid #7445a4;
  border-radius:15px;
  box-shadow:0 0 22px #a855f71a;
  padding:24px;
  margin-bottom:24px;
}
.stats {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.stats .panel {min-width:0;}
.big {font-size:clamp(1.7rem,3vw,2.8rem);font-weight:800;color:var(--cyan);}
.pink {color:var(--pink);}
.purple {color:var(--purple);}
.cyan {color:var(--cyan);font-weight:bold;}
.bar {height:13px;background:#392a50;border-radius:20px;overflow:hidden;}
.bar div {
  height:100%;
  background:linear-gradient(90deg,var(--pink),var(--purple),var(--cyan));
  box-shadow:0 0 15px var(--cyan);
}
.cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:15px;}
.subpanel {background:#0c1026;border:1px solid #393b72;border-radius:12px;padding:20px;}
.two {display:grid;grid-template-columns:1fr 1fr;gap:22px;}
label {display:block;margin:12px 0;color:#c8c0ed;font-size:.9rem;}
input {
  display:block;width:100%;padding:12px;margin-top:6px;
  background:#0a1023;border:1px solid #61528e;border-radius:7px;
  color:white;font:inherit;
}
input:focus {outline:2px solid var(--cyan);}
input[type=checkbox] {width:20px;height:20px;margin:0;accent-color:var(--cyan);}
.check {display:flex;align-items:center;gap:12px;}
button {
  border:0;border-radius:8px;padding:12px 20px;cursor:pointer;
  font-weight:800;color:#0c0920;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  box-shadow:0 0 12px #28f0ff44;
}
button:hover {filter:brightness(1.2);}
.secondary {background:#34264e;color:white;}
.scroll {overflow-x:auto;}
table {width:100%;border-collapse:collapse;min-width:690px;}
th {color:var(--cyan);text-align:left;font-size:.8rem;}
td,th {padding:14px;border-bottom:1px solid #3b3159;vertical-align:top;}
small,.muted {color:#aaa2cb;}
.history {display:flex;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid #403259;}
.history strong {color:var(--cyan);}
.login {min-height:100vh;display:grid;place-items:center;padding:20px;}
.loginbox {width:100%;max-width:440px;}
.error {color:#ff809b;}
.notice {padding:15px;border:1px solid var(--purple);}
.password-form {max-width:520px;}
footer {text-align:center;color:#8e86ae;padding:30px;font-size:.8rem;}
@media(max-width:850px) {
  .stats,.two {grid-template-columns:1fr;}
  header {flex-wrap:wrap;}
  .panel {padding:17px;}
}