@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800&display=swap");

:root {
  --bg: #120a20;
  --panel: rgba(18, 10, 32, 0.84);
  --line: rgba(22, 232, 255, 0.2);
  --text: #ffffff;
  --muted: #aeb7c8;
  --pink: #ff3fb4;
  --cyan: #16e8ff;
  --green: #37ff9a;
  --yellow: #ffcf4a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Montserrat, Arial, sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 63, 180, 0.22), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(22, 232, 255, 0.2), transparent 30%),
    linear-gradient(135deg, #160622 0%, #241044 46%, #061820 100%);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(4, 6, 16, 0.34);
}

.topbar strong { display: block; font-size: 20px; }
.topbar span, .panel h2 + p { color: var(--muted); font-size: 13px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.ghost-link, .oauth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 11px 16px;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  background: rgba(255,255,255,.08);
}
.oauth-button { margin-top: 12px; background: #5865f2; }
.muted { color: var(--muted); }
main { width: min(1320px, calc(100% - 32px)); margin: 26px auto; }
.stats, .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats article, .panel, .login {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24), 0 0 24px rgba(255, 63, 180, 0.08);
}
.stats article { padding: 18px; }
.stats span { color: var(--muted); display: block; }
.stats b { font-size: 32px; margin-top: 8px; display: block; }
.panel { padding: 18px; overflow: hidden; }
h1, h2 { margin: 0 0 14px; }
h3 { margin: 18px 0 10px; font-size: 15px; color: var(--cyan); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; }
th { color: var(--muted); font-weight: 700; }
.pill { display: inline-flex; min-width: 62px; justify-content: center; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.08); }
.pill.open, .pill.active { color: var(--green); }
.pill.closed, .pill.ended { color: var(--yellow); }
textarea, input {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  background: rgba(0,0,0,.22);
  resize: vertical;
}
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
label input, label select, label textarea { color: var(--text); }
select {
  width: min(520px, 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--text);
  background: rgba(0,0,0,.28);
}
.server-picker {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(18, 10, 32, 0.62);
}
.server-picker label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.notice {
  margin-bottom: 14px;
  border: 1px solid rgba(55,255,154,.35);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--green);
  background: rgba(55,255,154,.08);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.form-grid > label { align-self: start; align-content: start; min-width: 0; }
.form-grid > label > span { line-height: 1.35; }
.check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(0,0,0,.16);
}
.check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.check-grid input {
  width: auto;
}
.inline-form {
  display: grid;
  grid-template-columns: minmax(160px, 280px) minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}
button {
  margin-top: 10px;
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg, var(--pink), var(--cyan));
}
.secondary-action {
  width: fit-content;
  margin-top: 2px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(22,232,255,.28);
}
.bot-name-form { grid-template-columns: minmax(220px, 520px) auto; max-width: 760px; }
.ghost { margin: 0; background: rgba(255,255,255,.08); }
.centered { display: grid; place-items: center; }
.login { width: min(420px, calc(100% - 32px)); padding: 24px; }
.error { color: #ff8aa7; }
.danger-panel { border-color: rgba(255, 80, 110, .45); }
.danger-panel form { display: grid; gap: 12px; }
.danger-button { background: linear-gradient(135deg, #ff315d, #b41642); }
.mass-role-preview {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 207, 74, .35);
  border-radius: 8px;
  color: var(--yellow);
  background: rgba(255, 207, 74, .07);
}
.mass-role-preview p { margin: 0 0 8px; }
button:disabled { cursor: not-allowed; opacity: .55; }
.log-list article { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.log-list span { color: var(--muted); margin-left: 8px; font-size: 12px; }
.log-list p { color: var(--muted); margin: 6px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.name-review-list { display: grid; gap: 8px; margin-top: 12px; }
.name-review-list > p { margin: 0 0 4px; color: var(--yellow); }
.name-review-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(0,0,0,.16);
}
.name-review-item b, .name-review-item span { display: block; overflow-wrap: anywhere; }
.name-review-item span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.name-review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.name-review-actions button { margin: 0; }

@media (max-width: 860px) {
  .stats, .grid, .form-grid, .check-grid, .inline-form { grid-template-columns: 1fr; }
  .name-review-item { grid-template-columns: 1fr; }
  .name-review-actions { justify-content: flex-start; }
  .topbar { padding: 14px 16px; }
}