:root{
  --bg:#070812;
  --panel:#0c0f1f;
  --panel2:#0a0b14;
  --line:#18204a;
  --blue:#1ea7ff;
  --mag:#ff2bd6;
  --txt:#e8ecff;
  --muted:#93a0d6;
  --danger:#ff3b5c;
  --ok:#2bffb8;
  --shadow: 0 12px 40px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Arial;
  color:var(--txt);
  background: radial-gradient(1200px 700px at 15% 10%, rgba(30,167,255,.15), transparent 55%),
              radial-gradient(1000px 700px at 90% 20%, rgba(255,43,214,.12), transparent 55%),
              var(--bg);
  overflow-x:hidden;
}

.bg-grid{
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(30,167,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,43,214,.06) 1px, transparent 1px);
  background-size: 54px 54px, 54px 54px;
  mask-image: radial-gradient(circle at 30% 10%, black 0%, transparent 65%);
  pointer-events:none;
  opacity:.75;
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background: linear-gradient(180deg, rgba(12,15,31,.92), rgba(12,15,31,.70));
  border-bottom:1px solid rgba(24,32,74,.9);
  backdrop-filter: blur(10px);
}

.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:44px;height:44px;border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(30,167,255,.9), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,43,214,.85), transparent 55%),
    linear-gradient(135deg, rgba(255,43,214,.25), rgba(30,167,255,.25));
  border:1px solid rgba(255,43,214,.35);
  box-shadow: 0 0 0 2px rgba(30,167,255,.15), 0 10px 30px rgba(0,0,0,.45);
}
.title{font-weight:800;letter-spacing:.12em}
.subtitle{font-size:12px;color:var(--muted);margin-top:2px}

.top-actions{display:flex; gap:10px; align-items:center}

.layout{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap:16px;
  padding:16px;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 980px){
  .layout{grid-template-columns: 1fr}
}

.card{
  background: linear-gradient(180deg, rgba(12,15,31,.88), rgba(10,11,20,.88));
  border:1px solid rgba(24,32,74,.9);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(24,32,74,.7);
}

h2{margin:0;font-size:16px;letter-spacing:.06em}

.row{
  display:flex; gap:10px;
  padding:12px 14px;
}

.input, .select{
  width:100%;
  background: rgba(7,8,18,.65);
  color:var(--txt);
  border:1px solid rgba(24,32,74,.95);
  outline:none;
  border-radius:12px;
  padding:10px 12px;
  box-shadow: inset 0 0 0 1px rgba(30,167,255,.06);
}

.select{width:220px}

.btn{
  border:1px solid rgba(30,167,255,.55);
  background: linear-gradient(180deg, rgba(30,167,255,.18), rgba(30,167,255,.08));
  color:var(--txt);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.03em;
  transition:.15s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(30,167,255,.10)}
.btn:active{transform: translateY(0px)}

.btn.ghost{
  border-color: rgba(255,43,214,.45);
  background: linear-gradient(180deg, rgba(255,43,214,.14), rgba(255,43,214,.06));
}
.btn.danger{
  border-color: rgba(255,59,92,.65);
  background: linear-gradient(180deg, rgba(255,59,92,.18), rgba(255,59,92,.08));
}

.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,43,214,.35);
  background: rgba(7,8,18,.55);
  color:var(--muted);
}

.list{padding:0 14px 14px}
.item{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(24,32,74,.75);
  background: rgba(7,8,18,.35);
  margin-top:10px;
}
.item code{color:var(--txt)}
.item .mini{
  border:1px solid rgba(255,43,214,.45);
  background: rgba(255,43,214,.10);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.item .mini:hover{box-shadow: 0 0 0 2px rgba(255,43,214,.10)}
.item .mini.danger{
  border-color: rgba(255,59,92,.60);
  background: rgba(255,59,92,.10);
  color: #FFF;
}

.filters{display:flex; gap:10px; align-items:center}

.table-wrap{overflow:auto; padding: 6px 14px 14px}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width: 860px;
}
.table th, .table td{
  text-align:left;
  padding:10px 10px;
  border-bottom: 1px solid rgba(24,32,74,.65);
  font-size:13px;
}
.table th{
  position:sticky; top:0;
  background: rgba(12,15,31,.95);
  z-index:2;
  color: var(--muted);
  letter-spacing:.04em;
}
.badge{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(30,167,255,.35);
  background: rgba(30,167,255,.08);
  font-weight:800;
  font-size:12px;
}
.badge.ok{border-color: rgba(43,255,184,.45); background: rgba(43,255,184,.10); color: var(--ok)}
.badge.err{border-color: rgba(255,59,92,.55); background: rgba(255,59,92,.10); color: var(--danger)}
.badge.mid{border-color: rgba(255,43,214,.45); background: rgba(255,43,214,.10); color: var(--mag)}

.pager{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 0 14px 14px;
}

.hint{
  padding: 0 14px 14px;
  color: var(--muted);
  font-size:12px;
}
.hint code{color: var(--txt)}

.toast{
  position: fixed;
  right: 16px; bottom: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid rgba(30,167,255,.45);
  background: rgba(12,15,31,.90);
  box-shadow: var(--shadow);
  display:none;
  max-width: 420px;
}