:root {
  --admin-accent: #7c5cff;
  --admin-accent-soft: rgba(124, 92, 255, 0.14);
  --admin-ok: #1f8f63;
  --admin-warn: #c58518;
  --admin-danger: #d14545;
  --admin-muted-border: rgba(120, 120, 140, 0.2);
}

body[data-afua-surface="admin"] #app {
  padding-bottom: 40px;
}

.admin-shell {
  display: grid;
  gap: 24px;
}

.admin-hero {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr);
  align-items: stretch;
}

.admin-hero-copy,
.admin-hero-side,
.admin-card,
.admin-chart-card,
.admin-table-card,
.admin-panel {
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--admin-muted-border);
  border-radius: 26px;
  box-shadow: 0 18px 48px rgba(22, 25, 36, 0.08);
  backdrop-filter: blur(14px);
}

body.dark .admin-hero-copy,
body.dark .admin-hero-side,
body.dark .admin-card,
body.dark .admin-chart-card,
body.dark .admin-table-card,
body.dark .admin-panel,
body.aurora .admin-hero-copy,
body.aurora .admin-hero-side,
body.aurora .admin-card,
body.aurora .admin-chart-card,
body.aurora .admin-table-card,
body.aurora .admin-panel {
  background: rgba(18, 20, 30, 0.86);
  border-color: rgba(166, 176, 216, 0.16);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.admin-hero-copy {
  padding: 28px;
}

.admin-hero-side {
  padding: 22px;
  display: grid;
  gap: 16px;
}

.admin-super {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--admin-accent-soft);
  color: var(--admin-accent);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}

.admin-hero-copy h1 {
  margin: 14px 0 10px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 0.95;
}

.admin-hero-copy p {
  margin: 0;
  max-width: 56rem;
  font-size: 1rem;
  line-height: 1.6;
}

.admin-cta-row {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-subnav a,
.admin-mini-tab {
  text-decoration: none;
  color: inherit;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--admin-muted-border);
  background: rgba(255,255,255,0.65);
  font-size: 0.94rem;
}

body.dark .admin-subnav a,
body.dark .admin-mini-tab,
body.aurora .admin-subnav a,
body.aurora .admin-mini-tab {
  background: rgba(255,255,255,0.04);
}

.admin-subnav a.active,
.admin-mini-tab.active {
  border-color: transparent;
  background: var(--admin-accent);
  color: white;
}

.admin-kpi-grid,
.admin-two-col,
.admin-three-col,
.admin-four-col {
  display: grid;
  gap: 18px;
}

.admin-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-four-col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-card,
.admin-chart-card,
.admin-table-card,
.admin-panel {
  padding: 22px;
}

.admin-kpi-card {
  display: grid;
  gap: 8px;
  align-content: start;
}

.admin-kpi-label,
.admin-section-kicker,
.admin-meta {
  color: rgba(90, 96, 116, 0.92);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.dark .admin-kpi-label,
body.dark .admin-section-kicker,
body.dark .admin-meta,
body.aurora .admin-kpi-label,
body.aurora .admin-section-kicker,
body.aurora .admin-meta {
  color: rgba(200, 207, 233, 0.76);
}

.admin-kpi-value {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
}

.admin-kpi-foot {
  color: rgba(90, 96, 116, 0.88);
  font-size: 0.95rem;
}

body.dark .admin-kpi-foot,
body.aurora .admin-kpi-foot {
  color: rgba(206, 214, 240, 0.82);
}

.admin-panel-header,
.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-panel-header h2,
.admin-card-header h2,
.admin-card-header h3,
.admin-panel-header h3 {
  margin: 0;
  font-size: 1.15rem;
}

.admin-list,
.admin-table,
.admin-user-grid,
.admin-creator-grid,
.admin-lane-grid,
.admin-info-grid {
  display: grid;
  gap: 12px;
}

.admin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(124, 92, 255, 0.1);
  color: var(--admin-accent);
}

.admin-pill.ok { background: rgba(31, 143, 99, 0.12); color: var(--admin-ok); }
.admin-pill.warn { background: rgba(197, 133, 24, 0.14); color: var(--admin-warn); }
.admin-pill.danger { background: rgba(209, 69, 69, 0.14); color: var(--admin-danger); }

.admin-list-item,
.admin-user-card,
.admin-creator-card,
.admin-info-card,
.admin-route-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--admin-muted-border);
  background: rgba(255,255,255,0.46);
}

body.dark .admin-list-item,
body.dark .admin-user-card,
body.dark .admin-creator-card,
body.dark .admin-info-card,
body.dark .admin-route-card,
body.aurora .admin-list-item,
body.aurora .admin-user-card,
body.aurora .admin-creator-card,
body.aurora .admin-info-card,
body.aurora .admin-route-card {
  background: rgba(255,255,255,0.03);
}

.admin-list-item h4,
.admin-user-card h4,
.admin-creator-card h4,
.admin-info-card h4,
.admin-route-card h4 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.admin-list-item p,
.admin-user-card p,
.admin-creator-card p,
.admin-info-card p,
.admin-route-card p {
  margin: 0;
  line-height: 1.55;
}

.admin-actions,
.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.admin-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(124, 92, 255, 0.12);
  color: var(--admin-accent);
}

.admin-btn.primary {
  background: var(--admin-accent);
  color: white;
}

.admin-btn.ghost {
  border: 1px solid var(--admin-muted-border);
  background: transparent;
  color: inherit;
}

.admin-btn.warn {
  background: rgba(197, 133, 24, 0.14);
  color: var(--admin-warn);
}

.admin-btn.danger {
  background: rgba(209, 69, 69, 0.14);
  color: var(--admin-danger);
}

.admin-bar-chart,
.admin-device-bars {
  display: grid;
  gap: 12px;
}

.admin-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr minmax(58px, 72px);
  gap: 12px;
  align-items: center;
}

.admin-bar-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(124, 92, 255, 0.1);
  overflow: hidden;
}

.admin-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--admin-accent), #11a8fd);
}

.admin-bar-fill.warn { background: linear-gradient(90deg, #d69520, #f6b541); }
.admin-bar-fill.danger { background: linear-gradient(90deg, #d14545, #ff7a59); }
.admin-bar-fill.ok { background: linear-gradient(90deg, #1f8f63, #4dcc96); }

.admin-donut-wrap {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(220px, 280px) 1fr;
  align-items: center;
}

.admin-donut {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  margin-inline: auto;
}

.admin-donut svg { width: 100%; height: 100%; }

.admin-donut-legend {
  display: grid;
  gap: 10px;
}

.admin-legend-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.admin-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.admin-table-head,
.admin-table-row {
  display: grid;
  gap: 12px;
  align-items: center;
}

.admin-table-head.users,
.admin-table-row.users {
  grid-template-columns: minmax(190px, 1.2fr) minmax(160px, 1fr) minmax(130px, .8fr) minmax(150px, 1fr) minmax(220px, 1.2fr);
}

.admin-table-head.routes,
.admin-table-row.routes {
  grid-template-columns: 1.1fr .8fr .8fr 1.5fr;
}

.admin-table-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--admin-muted-border);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-table-row {
  padding: 12px 0;
  border-bottom: 1px solid rgba(120, 120, 140, 0.12);
}

.admin-table-row:last-child { border-bottom: 0; }

.admin-user-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.admin-empty {
  padding: 24px;
  border-radius: 18px;
  border: 1px dashed var(--admin-muted-border);
  text-align: center;
}

.admin-flash {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(124, 92, 255, 0.1);
  color: var(--admin-accent);
  font-weight: 600;
}

.admin-flash.warn { background: rgba(197, 133, 24, 0.12); color: var(--admin-warn); }
.admin-flash.danger { background: rgba(209, 69, 69, 0.12); color: var(--admin-danger); }
.admin-flash.ok { background: rgba(31, 143, 99, 0.12); color: var(--admin-ok); }

.admin-split {
  display: grid;
  gap: 16px;
  grid-template-columns: 1.2fr 1fr;
}

@media (max-width: 1180px) {
  .admin-hero,
  .admin-two-col,
  .admin-three-col,
  .admin-four-col,
  .admin-split,
  .admin-donut-wrap,
  .admin-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  .admin-hero,
  .admin-two-col,
  .admin-three-col,
  .admin-four-col,
  .admin-split,
  .admin-donut-wrap,
  .admin-kpi-grid,
  .admin-bar-row,
  .admin-table-head.users,
  .admin-table-row.users,
  .admin-table-head.routes,
  .admin-table-row.routes {
    grid-template-columns: 1fr;
  }

  .admin-hero-copy,
  .admin-hero-side,
  .admin-card,
  .admin-chart-card,
  .admin-table-card,
  .admin-panel {
    padding: 18px;
  }

  .admin-table-head { display: none; }
  .admin-table-row { padding: 16px 0; }
}



.admin-toast{position:fixed;right:18px;bottom:18px;z-index:9999;padding:12px 16px;border-radius:14px;background:#151827;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.2);opacity:0;transform:translateY(10px);transition:all .2s ease}
.admin-toast.show{opacity:1;transform:translateY(0)}
.admin-toast.ok{background:#1f8f63}.admin-toast.warn{background:#b7791f}.admin-toast.danger{background:#b83232}
.admin-subnav-wide{max-height:none}
.admin-note{margin:0;font-size:.95rem;line-height:1.6;color:rgba(90,96,116,.9)}
body.dark .admin-note,body.aurora .admin-note{color:rgba(206,214,240,.82)}
.admin-form{display:grid;gap:14px}
.admin-field{display:grid;gap:8px}
.admin-field span{font-weight:700;font-size:.88rem;letter-spacing:.03em;text-transform:uppercase;color:rgba(90,96,116,.9)}
body.dark .admin-field span,body.aurora .admin-field span{color:rgba(206,214,240,.82)}
.admin-field input,.admin-field select,.admin-field textarea,#siteControlImport{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--admin-muted-border);background:rgba(255,255,255,.72);font:inherit;color:inherit}
body.dark .admin-field input,body.dark .admin-field select,body.dark .admin-field textarea,body.dark #siteControlImport,body.aurora .admin-field input,body.aurora .admin-field select,body.aurora .admin-field textarea,body.aurora #siteControlImport{background:rgba(255,255,255,.04)}
.admin-action-group{display:flex;flex-wrap:wrap;gap:10px}
.admin-btn{appearance:none;border:1px solid var(--admin-muted-border);background:rgba(255,255,255,.72);border-radius:999px;padding:10px 14px;font:inherit;font-weight:700;color:inherit;cursor:pointer;text-decoration:none}
body.dark .admin-btn,body.aurora .admin-btn{background:rgba(255,255,255,.04)}
.admin-btn.primary{background:var(--admin-accent);border-color:transparent;color:#fff}
.admin-table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--admin-muted-border)}
.admin-data-table{width:100%;border-collapse:collapse;font-size:.95rem}
.admin-data-table th,.admin-data-table td{padding:12px 14px;vertical-align:top;border-bottom:1px solid var(--admin-muted-border);text-align:left}
.admin-data-table th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:rgba(90,96,116,.92)}
body.dark .admin-data-table th,body.aurora .admin-data-table th{color:rgba(206,214,240,.82)}
.admin-inline-muted{font-size:.86rem;color:rgba(90,96,116,.92)}
body.dark .admin-inline-muted,body.aurora .admin-inline-muted{color:rgba(206,214,240,.82)}
.admin-chart{display:grid;gap:12px}
.admin-bar-row{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center}
.admin-bar-track{height:12px;border-radius:999px;background:rgba(124,92,255,.12);overflow:hidden}
.admin-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--admin-accent),#7c5cff)}
.admin-import-box{margin-top:18px;padding-top:18px;border-top:1px solid var(--admin-muted-border)}
.admin-token-wrap{display:flex;flex-wrap:wrap;gap:10px}
.admin-token{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(124,92,255,.10);border:1px solid rgba(124,92,255,.18);font-size:.86rem}
@media (max-width: 980px){.admin-kpi-grid,.admin-two-col,.admin-three-col,.admin-four-col,.admin-hero{grid-template-columns:1fr}.admin-bar-row{grid-template-columns:56px 1fr}}