:root {

  --bg: #0b0d10;

  --panel: #15181f;

  --panel-2: #1c2029;

  --text: #ffffff;

  --muted: #aeb5c2;

  --border: rgba(255,255,255,.12);

  --accent: #ffffff;

  --danger: #ff7676;

  --success: #5ee08a;

}

* {

  box-sizing: border-box;

}

body {

  margin: 0;

  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background: var(--bg);

  color: var(--text);

}

.admin-shell {

  min-height: 100vh;

  padding: 28px;

}

.login-card {

  width: min(430px, 100%);

  margin: 12vh auto;

  background: var(--panel);

  border: 1px solid var(--border);

  border-radius: 24px;

  padding: 32px;

}

h1 {

  margin: 0 0 10px;

  font-size: clamp(34px, 5vw, 52px);

  line-height: 1;

}

p {

  color: var(--muted);

}

form {

  display: grid;

  gap: 14px;

  margin-top: 24px;

}

input {

  width: 100%;

  border: 1px solid var(--border);

  background: #0f1218;

  color: var(--text);

  border-radius: 14px;

  padding: 14px 16px;

  font: inherit;

}

button {

  border: 0;

  border-radius: 999px;

  padding: 14px 20px;

  background: var(--accent);

  color: #000;

  font-weight: 900;

  cursor: pointer;

  white-space: nowrap;

}

button.secondary {

  background: transparent;

  color: var(--text);

  border: 1px solid var(--border);

}

.hidden {

  display: none;

}

.dashboard {

  width: min(1400px, 100%);

  margin: 0 auto;

}

.dashboard-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  margin-bottom: 28px;

}

.stats {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

  margin-bottom: 24px;

}

.stat-card {

  background: var(--panel);

  border: 1px solid var(--border);

  border-radius: 22px;

  padding: 22px;

}

.stat-card span {

  display: block;

  color: var(--muted);

  margin-bottom: 8px;

  font-size: 14px;

}

.stat-card strong {

  font-size: 40px;

  line-height: 1;

}

.toolbar {

  display: flex;

  gap: 12px;

  margin-bottom: 18px;

}

.toolbar input {

  flex: 1;

}

.table-wrap {

  overflow-x: auto;

  background: var(--panel);

  border: 1px solid var(--border);

  border-radius: 22px;

}

table {

  width: 100%;

  border-collapse: collapse;

  min-width: 1250px;

}

th,

td {

  padding: 14px 16px;

  border-bottom: 1px solid var(--border);

  text-align: left;

  vertical-align: top;

  font-size: 14px;

}

th {

  color: var(--muted);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: .08em;

}

td {

  color: rgba(255,255,255,.92);

}

.badge {

  display: inline-flex;

  align-items: center;

  border-radius: 999px;

  padding: 5px 10px;

  font-size: 12px;

  font-weight: 800;

  background: rgba(255,255,255,.09);

  color: #fff;

}

.badge.yes {

  background: rgba(94, 224, 138, .16);

  color: var(--success);

}

.badge.no {

  background: rgba(255, 118, 118, .16);

  color: var(--danger);

}

.message {

  min-height: 24px;

  font-weight: 800;

}

.message.error {

  color: var(--danger);

}

.message.success {

  color: var(--success);

}

@media (max-width: 900px) {

  .dashboard-header,

  .toolbar {

    flex-direction: column;

    align-items: stretch;

  }

  .stats {

    grid-template-columns: 1fr 1fr;

  }

}

@media (max-width: 560px) {

  .admin-shell {

    padding: 18px;

  }

  .stats {

    grid-template-columns: 1fr;

  }

}