@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #080c18;
  --surface: rgba(255,255,255,0.03);
  --surface-hover: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --text: #fff;
  --text-sec: rgba(255,255,255,0.5);
  --text-ter: rgba(255,255,255,0.3);
  --accent: #6C63FF;
  --green: #10b981;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --card-rad: 16px;
}

* { margin:0; padding:0; box-sizing:border-box }
body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
a { color:var(--accent); text-decoration:none }
a:hover { opacity:.85 }

.admin-bg {
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 0% 30%, rgba(108,99,255,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 70%, rgba(16,185,129,0.05) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

.admin-wrap {
  position:relative;z-index:1;
  max-width:1100px;margin:0 auto;padding:40px 24px;
  animation:fadeUp .5s ease-out both;
}

/* Header */
.admin-header {
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:28px;gap:12px;flex-wrap:wrap;
}
.header-left { display:flex;align-items:center;gap:10px }
.admin-header h1 { font-size:22px; font-weight:700; letter-spacing:-.02em }
.header-count {
  font-size:13px; font-weight:600; font-family:'JetBrains Mono',monospace;
  padding:3px 10px; border-radius:20px;
  background:rgba(108,99,255,0.12); color:var(--accent);
}
.header-right { display:flex;align-items:center;gap:10px }
.nav-link {
  font-size:13px; font-weight:600; padding:8px 14px;
  border-radius:10px; transition:background .2s;
}
.nav-link:hover { background:var(--surface) }

/* Buttons */
.btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px; border:none; border-radius:10px;
  font-size:13px; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif;
  cursor:pointer; transition:transform .25s, box-shadow .25s;
  text-decoration:none; line-height:1;
}
.btn:hover { transform:translateY(-2px) }
.btn-primary { background:var(--accent); color:#fff }
.btn-primary:hover { box-shadow:0 6px 24px rgba(108,99,255,0.25) }
.btn-danger { background:var(--rose); color:#fff }
.btn-danger:hover { box-shadow:0 6px 24px rgba(244,63,94,0.25) }
.btn-sm {
  padding:6px 10px; border:none; border-radius:8px;
  font-size:12px; cursor:pointer; background:var(--surface);
  color:var(--text-sec); transition:background .2s, color .2s;
}
.btn-sm:hover { background:var(--surface-hover); color:var(--text) }
.btn-sm.danger { color:var(--rose) }
.btn-sm.danger:hover { background:rgba(244,63,94,0.12) }
.btn-full { width:100%; justify-content:center; padding:12px }

/* Table */
.table-wrap {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--card-rad);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  overflow-x:auto;
  animation:fadeUp .5s .1s ease-out both;
}
.tbl { width:100%; border-collapse:collapse; font-size:13px }
.tbl th {
  text-align:left; padding:14px 16px;
  color:var(--text-ter); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.tbl td {
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  color:var(--text-sec);
  white-space:nowrap;
}
.tbl tr:last-child td { border-bottom:none }
.tbl tr:hover td { background:rgba(255,255,255,0.02) }
.tbl code { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-ter) }
.tbl .actions { display:flex; gap:4px }

/* Badge */
.badge {
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
}
.badge-free { background:rgba(16,185,129,0.12); color:var(--green) }
.badge-paid { background:rgba(245,158,11,0.12); color:var(--amber) }
.badge-test { background:rgba(108,99,255,0.12); color:var(--accent) }

/* Stat grid */
.stat-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px; margin-bottom:28px;
  animation:fadeUp .5s .05s ease-out both;
}
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--card-rad); padding:18px 20px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .3s;
}
.stat-card:hover { border-color:var(--border-hover) }
.stat-lbl { font-size:12px; color:var(--text-ter); font-weight:500; margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em }
.stat-val { font-size:30px; font-weight:800; letter-spacing:-.03em }
.stat-sub { font-size:11px; color:var(--text-ter); margin-top:4px }

/* Server section */
.srv-section { animation:fadeUp .5s .15s ease-out both }
.srv-section h2 { font-size:16px; font-weight:600; margin-bottom:14px }
.srv-row {
  display:flex; justify-content:space-between; align-items:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:14px 18px; margin-bottom:8px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .3s;
}
.srv-row:hover { border-color:var(--border-hover) }
.srv-row .srv-name { font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px }
.srv-row .srv-ibs { font-size:12px; color:var(--text-ter); font-family:'JetBrains Mono',monospace }

/* Login */
.login-wrap {
  position:fixed;inset:0;display:flex;
  align-items:center;justify-content:center;
  padding:20px;
}
.login-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--card-rad); padding:40px 36px;
  max-width:380px; width:100%;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  text-align:center;
  animation:fadeUp .5s ease-out both;
}
.login-icon { font-size:36px; margin-bottom:8px }
.login-card h1 { font-size:20px; font-weight:700; margin-bottom:24px; letter-spacing:-.02em }
.login-err {
  margin-top:16px; padding:10px 14px;
  background:rgba(244,63,94,0.08);
  border:1px solid rgba(244,63,94,0.2);
  border-radius:10px; font-size:13px; color:var(--rose);
}

/* Forms */
.fg { margin-bottom:16px; text-align:left }
.fg label { display:block; margin-bottom:6px; font-size:12px; font-weight:600; color:var(--text-sec) }
.fg input, .fg select {
  width:100%; padding:12px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:10px; color:var(--text);
  font-size:14px; font-family:'Plus Jakarta Sans',sans-serif;
  outline:none; transition:border-color .2s;
}
.fg input:focus, .fg select:focus { border-color:var(--accent) }
.fg input::placeholder { color:var(--text-ter) }
.fg select option { background:var(--bg) }
.fg-check { margin-bottom:16px }
.fg-check label { font-size:13px; color:var(--text-sec); display:flex; align-items:center; gap:8px; cursor:pointer }
.fg-check input[type="checkbox"] { width:16px; height:16px; accent-color:var(--accent) }

/* Modal */
.modal {
  display:none; position:fixed; inset:0;
  z-index:1000; align-items:center; justify-content:center;
  padding:20px;
}
.modal.active { display:flex }
.modal-overlay {
  position:absolute;inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.modal-card {
  position:relative;
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--card-rad); padding:28px;
  max-width:460px; width:100%;
  animation:fadeUp .3s ease-out both;
}
.modal-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px }
.modal-h h2 { font-size:18px; font-weight:700 }
.modal-x {
  background:none; border:none; color:var(--text-ter);
  font-size:24px; cursor:pointer; padding:4px; line-height:1;
  transition:color .2s;
}
.modal-x:hover { color:var(--text) }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px) }
  to { opacity:1; transform:translateY(0) }
}

@media(max-width:700px) {
  .admin-wrap { padding:20px 12px }
  .admin-header { flex-direction:column; align-items:stretch }
  .header-right { justify-content:space-between }
  .tbl { font-size:12px }
  .tbl th, .tbl td { padding:10px 12px }
  .stat-card { padding:14px 14px }
  .stat-val { font-size:22px }
}
@media(max-width:480px) {
  .login-card { padding:28px 20px }
  .modal-card { padding:20px }
}