:root {
  --admin-bg: #070b17;
  --admin-panel: rgba(17, 24, 45, .94);
  --admin-panel-2: #151e35;
  --admin-border: rgba(121, 144, 255, .18);
  --admin-primary: #768cff;
  --admin-accent: #39e6b0;
  --admin-text: #f5f7ff;
  --admin-muted: #9aa7c7;
  --admin-shadow: 0 24px 70px rgba(0, 0, 0, .38);
}

html { color-scheme: dark; }
body {
  min-height: 100vh;
  color: var(--admin-text) !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(81, 101, 255, .18), transparent 32rem),
    radial-gradient(circle at 86% 12%, rgba(32, 218, 169, .10), transparent 28rem),
    var(--admin-bg) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.sidebar {
  width: 272px !important;
  padding: 28px 20px !important;
  background: rgba(10, 15, 29, .96) !important;
  border: 0 !important;
  border-right: 1px solid var(--admin-border) !important;
  box-shadow: 16px 0 50px rgba(0, 0, 0, .18);
  overflow-y: auto;
}
.sidebar h2 {
  margin: 0 8px 28px !important;
  color: var(--admin-text) !important;
  font-size: 22px !important;
  letter-spacing: -.02em;
  text-align: left !important;
}
.sidebar h2::before { content: "◆"; margin-right: 10px; color: var(--admin-accent); }
.sidebar a {
  margin: 4px 0 !important;
  padding: 12px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--admin-muted) !important;
  font-size: 14px;
  font-weight: 650;
}
.sidebar a:hover,
.sidebar a:focus-visible {
  color: var(--admin-text) !important;
  background: rgba(118, 140, 255, .12) !important;
  border-color: rgba(118, 140, 255, .22) !important;
  transform: none !important;
}

.content { margin-left: 272px !important; padding: 36px !important; }
.content > h1 { color: var(--admin-text) !important; font-size: 30px !important; letter-spacing: -.04em; }
.cards { gap: 14px !important; }
.card {
  min-width: 220px !important;
  padding: 20px !important;
  background: linear-gradient(145deg, rgba(25, 35, 62, .96), rgba(15, 22, 40, .96)) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .18) !important;
}
.card:hover { transform: translateY(-2px) !important; border-color: rgba(118, 140, 255, .42) !important; }
.card h3 { color: var(--admin-muted) !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .06em; }
.card p { color: var(--admin-text) !important; font-size: 25px !important; }

input, select, textarea {
  border: 1px solid var(--admin-border) !important;
  border-radius: 10px !important;
  background: #0d1426 !important;
  color: var(--admin-text) !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--admin-primary) !important; outline: 3px solid rgba(118, 140, 255, .14) !important; }
button, .btn {
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--admin-primary), #5d6fe0) !important;
  color: white !important;
  font-weight: 750 !important;
  box-shadow: 0 10px 24px rgba(91, 111, 224, .24);
}

.admin-login-shell { width: 100%; padding: 24px; }
.admin-login-card {
  max-width: 430px !important;
  margin: auto;
  padding: 34px !important;
  background: var(--admin-panel) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--admin-shadow) !important;
  transform: none !important;
}
.admin-login-card:hover { transform: none !important; box-shadow: var(--admin-shadow) !important; }
.admin-brand { margin-bottom: 8px; color: var(--admin-text); font-size: 24px; font-weight: 850; letter-spacing: -.04em; }
.admin-brand span { color: var(--admin-accent); }
.admin-login-kicker { margin: 0 0 28px; color: var(--admin-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; }
.admin-login-card h2 { margin-bottom: 22px !important; color: var(--admin-text) !important; text-align: left !important; letter-spacing: -.03em !important; }
.admin-login-card input { margin-bottom: 12px !important; padding: 14px 15px !important; }
.admin-login-card button { margin-top: 6px; padding: 14px !important; }

table { width: 100%; border-collapse: collapse; background: var(--admin-panel); border-radius: 14px; overflow: hidden; }
th { background: var(--admin-panel-2); color: var(--admin-muted); text-align: left; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--admin-border); }

@media (max-width: 820px) {
  .sidebar { position: relative !important; width: 100% !important; height: auto !important; }
  .content { margin-left: 0 !important; padding: 22px !important; }
}