:root{
  --bg1:#05060a; --bg2:#0a0f1f;
  --glass:rgba(255,255,255,0.06);
  --stroke:rgba(255,255,255,0.10);
  --text:rgba(255,255,255,0.88);
  --muted:rgba(255,255,255,0.62);
  --neon1:#00e5ff; --neon2:#ff3df2; --neon3:#7c4dff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 900px at 20% 10%, rgba(0,229,255,0.10), transparent 60%),
              radial-gradient(1100px 850px at 80% 30%, rgba(255,61,242,0.10), transparent 60%),
              radial-gradient(900px 700px at 50% 90%, rgba(124,77,255,0.10), transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}
.bg-grid:before{
  content:""; position:fixed; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 10%, rgba(0,0,0,1), rgba(0,0,0,0));
  pointer-events:none;
}
.orb{position:fixed;width:520px;height:520px;border-radius:50%;filter:blur(45px);opacity:.55;animation:float 10s ease-in-out infinite;pointer-events:none;}
.orb.one{left:-140px;top:-160px;background:radial-gradient(circle, rgba(0,229,255,0.85), transparent 60%);}
.orb.two{right:-180px;top:60px;background:radial-gradient(circle, rgba(255,61,242,0.75), transparent 60%);animation-duration:12s;}
.orb.three{left:20%;bottom:-220px;background:radial-gradient(circle, rgba(124,77,255,0.85), transparent 60%);animation-duration:14s;}
@keyframes float{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(18px,-14px) scale(1.03);}}

.container{max-width:1100px;margin:0 auto;padding:28px 18px 60px;}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.brand{display:flex;flex-direction:column;gap:4px;}
.brand h1{margin:0;font-size:22px;letter-spacing:.5px;}
.brand .sub{color:var(--muted);font-size:13px}

.card{
  background:var(--glass);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:16px;
  box-shadow:0 14px 40px rgba(0,0,0,0.45);
  backdrop-filter:blur(10px);
}
.row{display:flex;gap:14px;flex-wrap:wrap;}
.row>*{flex:1}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  color:var(--text);text-decoration:none;
  background:rgba(255,255,255,0.06);
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(0,229,255,0.35);background:rgba(0,229,255,0.08);}
.btn.danger:hover{border-color:rgba(255,61,242,0.35);background:rgba(255,61,242,0.08);}
.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:14px;}
.table th,.table td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,0.08);font-size:14px;}
.table th{color:rgba(255,255,255,0.78);text-align:left;font-weight:600;}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;background:rgba(0,229,255,0.12);border:1px solid rgba(0,229,255,0.22);}
.input{
  width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.25);color:var(--text);outline:none;
}
.input:focus{border-color:rgba(0,229,255,0.35);box-shadow:0 0 0 3px rgba(0,229,255,0.10);}
pre{margin:0;padding:14px;border-radius:14px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.10);overflow:auto;max-height:70vh;}
.small{font-size:12px;color:var(--muted)}