:root {
  --admin-bg: #0d1024;
  --admin-surface: rgba(255, 255, 255, .09);
  --admin-border: rgba(255, 255, 255, .14);
  --admin-text: #f6f7ff;
  --admin-muted: #aeb6d8;
  --admin-primary: #7c5cff;
  --admin-cyan: #1fd3ff;
  --admin-pink: #ff5fb7;
  --admin-green: #57eba8;
}

html {
  font-size: 14px;
  min-height: 100%;
  position: relative;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  background:
    radial-gradient(circle at 10% 10%, rgba(124, 92, 255, .34), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(31, 211, 255, .22), transparent 26rem),
    linear-gradient(135deg, #0d1024 0%, #151a3a 52%, #24113a 100%);
  color: var(--admin-text);
  font-family: "Segoe UI", Arial, sans-serif;
  margin-bottom: 70px;
  min-height: 100vh;
  overflow-x: hidden;
}

.admin-auth-pending [data-auth-content] {
  display: none !important;
}

.admin-authenticated [data-admin-login-screen] {
  display: none !important;
}

.admin-login-screen {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
}

.admin-login-card {
  backdrop-filter: blur(24px);
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--admin-border);
  border-radius: 30px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .34);
  max-width: 460px;
  padding: 2rem;
  width: 100%;
}

.admin-login-card h1 {
  font-weight: 950;
  margin-top: 1.4rem;
}

.admin-login-card p {
  color: var(--admin-muted);
}

.admin-login-hint {
  background: rgba(2, 6, 23, .5);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  direction: ltr;
  padding: .8rem;
  text-align: center;
}

.login-brand {
  justify-content: center;
}

.admin-bg-glow {
  border-radius: 999px;
  filter: blur(18px);
  opacity: .5;
  position: fixed;
  z-index: -1;
}

.glow-a {
  background: var(--admin-pink);
  height: 260px;
  right: -80px;
  top: 160px;
  width: 260px;
}

.glow-b {
  background: var(--admin-cyan);
  bottom: 60px;
  height: 330px;
  left: -110px;
  width: 330px;
}

.admin-header {
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

.admin-nav {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--admin-border);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  margin: 0 auto;
  max-width: min(1160px, calc(100% - 24px));
}

.admin-brand {
  align-items: center;
  color: #fff !important;
  display: inline-flex;
  font-weight: 900;
  gap: .7rem;
}

.admin-brand-icon {
  align-items: center;
  background: linear-gradient(135deg, var(--admin-primary), var(--admin-pink));
  border-radius: 16px;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.nav-link {
  border-radius: 999px;
  color: var(--admin-muted) !important;
  font-weight: 800;
  margin: 0 .15rem;
  padding-inline: .9rem !important;
}

.nav-link:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff !important;
}

.admin-shell {
  padding-top: 1rem;
}

.admin-card {
  backdrop-filter: blur(22px);
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .26);
  color: var(--admin-text);
  padding: 1.4rem;
}

.admin-card h1,
.admin-card h2,
.admin-card h3 {
  font-weight: 900;
}

.metric-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 1rem;
}

.metric-card {
  background: linear-gradient(135deg, rgba(124, 92, 255, .22), rgba(31, 211, 255, .12));
  border: 1px solid var(--admin-border);
  border-radius: 22px;
  padding: 1rem;
}

.metric-label {
  color: var(--admin-muted);
  display: block;
  font-weight: 800;
}

.metric-value {
  color: #fff;
  display: block;
  font-size: 2.35rem;
  font-weight: 950;
  line-height: 1;
  margin-top: .5rem;
}

.form-control,
.form-select {
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--admin-border);
  border-radius: 16px;
  color: #fff;
  min-height: 48px;
}

.form-control:focus,
.form-select:focus {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(31, 211, 255, .6);
  box-shadow: 0 0 0 .2rem rgba(31, 211, 255, .14);
  color: #fff;
}

.form-select option {
  color: #111;
}

.form-label {
  color: var(--admin-muted);
  font-weight: 800;
}

.btn {
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  padding: .7rem 1.15rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--admin-primary), var(--admin-pink));
  box-shadow: 0 14px 28px rgba(124, 92, 255, .24);
}

pre[data-load],
.admin-data-panel {
  background: rgba(2, 6, 23, .78);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  color: #d8fff7;
  direction: ltr;
  max-height: 560px;
  overflow: auto;
  padding: 1rem;
  text-align: left;
}

.status-box {
  border-radius: 14px;
  margin-top: 1rem;
  padding: .85rem;
}

.status-box:empty {
  display: none;
}

.blocked-preview {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  max-height: 120px;
  max-width: 160px;
  object-fit: cover;
}

.blocked-text-preview {
  max-width: 320px;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(255, 255, 255, .85);
}

.admin-footer {
  color: var(--admin-muted);
  padding: 1.5rem 0;
}

.admin-users-table .admin-user-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  min-width: 260px;
}

.admin-users-table tr.admin-user-pending td {
  background: rgba(255, 193, 7, .08);
}

.admin-users-summary {
  color: #ffc107;
  font-weight: 600;
  margin-bottom: .75rem;
}

.admin-users-table .admin-user-actions .form-select,
.admin-posts-table .admin-table-actions .form-select {
  flex: 1 1 110px;
  min-width: 110px;
}

.admin-users-table .admin-user-actions .btn,
.admin-posts-table .admin-table-actions .btn {
  white-space: nowrap;
}

.admin-posts-table .admin-table-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  min-width: 190px;
}

.admin-activities-list table {
  color: #e8ecf5;
  font-size: .92rem;
}

.admin-activities-list td,
.admin-activities-list th {
  padding: .45rem .5rem;
  vertical-align: top;
}

.admin-card.is-editing-activity {
  box-shadow: 0 0 0 2px rgba(124, 108, 255, .85), 0 12px 40px rgba(0, 0, 0, .35);
}