/* ═══════════════════════════════════════════════════════
   24HG Liquid Glass Design System — v2
   ═══════════════════════════════════════════════════════ */

:root {
  --accent:        #00e5ff;
  --accent-rgb:    0,229,255;
  --accent-dim:    color-mix(in srgb, var(--accent) 8%, transparent);
  --accent2:       color-mix(in srgb, var(--accent) 15%, transparent);
  --pink:          #e040fb;
  --pink-rgb:      224,64,251;
  --bg:            #07080a;
  --deep:          #0a0b0d;
  --surface:       #101114;
  --surface2:      #16171b;
  --surface-rgb:   16,17,20;
  --text:          #f0f0f0;
  --muted:         #6a6b6c;
  --border:        rgba(255,255,255,0.06);
  --border-focus:  color-mix(in srgb, var(--accent) 40%, transparent);
  --error:         #f43f5e;
  --warning:       #fbbf24;
  --success:       #22c55e;
  --sidebar-w:     264px;
  --glass-tint:        rgba(255,255,255,0.02);
  --glass-tint-md:     rgba(255,255,255,0.04);
  --glass-tint-strong: rgba(255,255,255,0.07);
  --radius-card:   16px;
  --radius-btn:    10px;
  --radius-sm:     8px;
  --blur-card:     50px;
  --blur-btn:      20px;
  --blur-sidebar:  40px;
  --transition:    0.22s cubic-bezier(0.4, 0, 0.2, 1);
  /* Legacy bridge */
  --admin-bg:              var(--bg);
  --admin-surface:         var(--surface);
  --admin-elevated:        var(--surface2);
  --admin-hover:           rgba(255,255,255,0.05);
  --admin-accent:          var(--accent);
  --admin-accent-dim:      var(--accent-dim);
  --admin-accent-glow:     color-mix(in srgb, var(--accent) 12%, transparent);
  --admin-pink:            var(--pink);
  --admin-pink-dim:        color-mix(in srgb, var(--pink) 8%, transparent);
  --admin-green:           var(--success);
  --admin-yellow:          var(--warning);
  --admin-red:             var(--error);
  --admin-blue:            #3b82f6;
  --admin-text:            var(--text);
  --admin-text-secondary:  rgba(240,240,240,0.7);
  --admin-text-dim:        rgba(240,240,240,0.6);
  --admin-text-muted:      var(--muted);
  --admin-border:          var(--border);
  --admin-border-hover:    rgba(255,255,255,0.12);
  --admin-border-solid:    rgba(255,255,255,0.07);
  --admin-radius:          var(--radius-card);
  --admin-radius-sm:       var(--radius-sm);
  --admin-radius-lg:       20px;
  --admin-transition:      var(--transition);
  --admin-shadow:          0 2px 12px rgba(0,0,0,0.3);
  --admin-shadow-lg:       0 8px 32px rgba(0,0,0,0.4);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient orbs via body pseudo-elements */
body::before {
  content: '';
  position: fixed;
  width: 900px; height: 900px;
  top: -250px; left: -100px;
  background: radial-gradient(circle at 40%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  animation: orbDrift1 28s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  width: 650px; height: 650px;
  bottom: -150px; right: -100px;
  background: radial-gradient(circle at 60%, color-mix(in srgb, var(--pink) 12%, transparent), transparent 70%);
  animation: orbDrift2 40s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes orbDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(60px,40px) scale(1.05); }
  66%      { transform: translate(-40px,80px) scale(0.97); }
}
@keyframes orbDrift2 {
  0%   { transform: translate(0,0); }
  100% { transform: translate(-80px,-60px); }
}
@keyframes fadeUp    { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes scaleIn   { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }
@keyframes modalIn   { from { opacity:0; transform:scale(0.92) translateY(12px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes pulse     { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.7); } }
@keyframes shimmer   { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes glassRipple { to { transform:scale(40); opacity:0; } }
@keyframes toastIn   { from { opacity:0; transform:translateY(-8px) translateX(8px); } to { opacity:1; transform:none; } }
@keyframes drainProgress { from { transform:scaleX(1); } to { transform:scaleX(0); } }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }


/* All layout wrappers fully transparent so orbs bleed through */
.admin-layout,
.admin-main,
.admin-content,
.admin-page,
.glass-page,
.glass-page-card {
  background: transparent !important;
}

/* ── Glass Cards ── */
.glass-card, .admin-card, .glass-page-card, .glass-subpanel,
.admin-platform-card, .admin-activity-entry {
  position: relative;
  background: color-mix(in srgb, var(--surface2) 60%, transparent) !important;
  backdrop-filter: blur(var(--blur-card)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur-card)) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-card);
  padding: 28px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.glass-card::before, .admin-card::before, .glass-page-card::before, .glass-subpanel::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.22), rgba(255,255,255,0.10),
    rgba(255,255,255,0), rgba(255,255,255,0),
    rgba(255,255,255,0.10), rgba(255,255,255,0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.glass-card--hover:hover, .admin-platform-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-dim);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.glass-card--accent::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 40%, transparent),
    color-mix(in srgb, var(--accent) 15%, transparent),
    transparent, transparent,
    color-mix(in srgb, var(--accent) 15%, transparent),
    color-mix(in srgb, var(--accent) 40%, transparent));
}
.glass-card--sm, .admin-activity-entry { padding: 16px; }
.glass-card.accent-top::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 1px;
}

/* ── Stat Cards ── */
.glass-stat, .admin-stat {
  background: color-mix(in srgb, var(--surface2) 60%, transparent) !important;
  backdrop-filter: blur(40px) saturate(1.2);
  -webkit-backdrop-filter: blur(40px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-card);
  padding: 28px 20px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 8px;
  min-height: 110px;
  position: relative;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  cursor: default;
}
.glass-stat:hover, .admin-stat:hover {
  transform: translateY(-2px);
  border-color: var(--accent-dim);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.glass-stat__value, .admin-stat-value {
  font-family: 'Orbitron', monospace;
  font-size: 24px; font-weight: 700; color: var(--text);
}
.glass-stat__label, .admin-stat-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted);
}
.admin-stat-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.glass-stat__delta--up  { font-family: 'Inter', -apple-system, sans-serif; font-size: 10px; color: var(--success); }
.glass-stat__delta--down{ font-family: 'Inter', -apple-system, sans-serif; font-size: 10px; color: var(--error); }

/* ── Sidebar ── */
.glass-sidebar, .admin-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border-right: 1px solid rgba(255,255,255,0.07);
  box-shadow: 4px 0 32px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
  z-index: 100;
  align-self: stretch; height: 100%; min-height: 0;
}

.sidebar-nav, .glass-sidebar nav, .admin-sidebar nav, .admin-sidebar-nav {
  flex: 1; padding: 8px 0;
  display: flex; flex-direction: column;
  overflow-y: auto; min-height: 0;
  position: relative;
}

#nav-glide-pill {
  position: absolute;
  left: 10px; right: 10px; top: 0;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 30%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.38s cubic-bezier(0.34, 1.4, 0.64, 1),
    height    0.22s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.2s ease;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.glass-nav__item, .admin-sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px;
  margin: 1px 10px;
  width: calc(100% - 20px);
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500;
  color: var(--muted);
  background: none; border: none;
  border-radius: 10px;
  text-align: left; cursor: pointer;
  position: relative; z-index: 1;
  transition: color 0.2s, background 0.18s;
  text-decoration: none;
  box-sizing: border-box;
}
.glass-nav__item svg, .admin-sidebar-item svg {
  flex-shrink: 0; width: 18px; height: 18px; position: static;
}
.glass-nav__item:hover:not(.active):not(.glass-nav__item--active),
.admin-sidebar-item:hover:not(.active) {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.glass-nav__item--active, .glass-nav__item.active, .admin-sidebar-item.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,0.04));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07),
              0 0 16px color-mix(in srgb, var(--accent) 12%, transparent);
}
.glass-nav__item--active svg, .glass-nav__item.active svg,
.admin-sidebar-item.active svg { color: var(--accent); }

.admin-sidebar-category-header, .glass-nav__section, .admin-sidebar-section {
  font-family: 'Inter', sans-serif;
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted); opacity: 0.5;
  padding: 12px 20px 4px; margin: 0 10px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; user-select: none;
}
.admin-sidebar-category-header:hover { opacity: 0.8; }

.admin-sidebar-category-arrow, .nav-group-chevron {
  font-size: 9px; opacity: 0.6;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
/* collapsed arrow rotates to point right */
.admin-sidebar-category-arrow.collapsed { transform: rotate(180deg); }

/* nav-group open/close */
.nav-group { display: flex; flex-direction: column; }
.nav-sub-items, .admin-sidebar-category-items {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
}
.nav-group.open .nav-sub-items,
.admin-sidebar-category-items:not(.collapsed) {
  max-height: 500px; opacity: 1;
}
.admin-sidebar-category-items.collapsed { max-height: 0; opacity: 0; }
.nav-sub-item {
  padding-left: 44px !important; font-size: 11px !important;
  letter-spacing: 0.04em !important; color: var(--muted) !important;
}
.nav-sub-item:hover:not(.active) {
  background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
}
.nav-sub-item.active { color: var(--accent) !important; }

.admin-sidebar-item-icon { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; }
.admin-sidebar-logo {
  padding: 20px 22px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.admin-sidebar-logo-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--pink));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--bg); flex-shrink: 0;
}
.admin-sidebar-logo-text { font-weight: 700; font-size: 15px; color: var(--text); }
.admin-sidebar-logo-sub  { font-size: 11px; color: var(--muted); }

.sidebar-bottom, .admin-sidebar-user {
  padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.user-chip { display: flex; align-items: center; gap: 12px; }
.user-avatar, .admin-sidebar-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--accent); flex-shrink: 0;
  overflow: hidden;
}
.user-avatar img, .admin-sidebar-user-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.admin-sidebar-user-info { flex: 1; min-width: 0; }
.admin-sidebar-user-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-sidebar-user-role { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.admin-sidebar-logout {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 4px; border-radius: 6px;
  transition: all 0.15s ease;
}
.admin-sidebar-logout:hover { color: var(--error); background: rgba(244,63,94,0.1); }


/* ── Topbar ── */
.glass-topbar, .admin-topbar {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 6px 20px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 50;
}
.glass-topbar__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: pulse 2s ease-in-out infinite;
}

/* ── Page Structure ── */
.glass-page { padding: 64px 48px 80px; animation: fadeUp 0.3s ease both; }
.admin-content { animation: fadeUp 0.3s ease both; padding-top: 64px; }
.page-title, .admin-page-title {
  font-size: 28px; font-weight: 800; color: var(--text); margin-bottom: 6px;
}
.page-sub, .admin-page-subtitle {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px; color: var(--muted);
}

/* ── Buttons ── */
.glass-btn, .admin-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  background: var(--glass-tint);
  backdrop-filter: blur(var(--blur-btn));
  -webkit-backdrop-filter: blur(var(--blur-btn));
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap; user-select: none;
  text-decoration: none; font-family: inherit;
}
.glass-btn--accent, .admin-btn-primary {
  background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.03));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08),
              0 0 20px color-mix(in srgb, var(--accent) 8%, transparent);
}
.glass-btn:hover, .admin-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.05));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10),
              0 4px 20px color-mix(in srgb, var(--accent) 15%, transparent);
}
.glass-btn:active { transform: translateY(0); }
.glass-btn--ghost, .admin-btn-ghost {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.12);
  color: var(--text);
}
.glass-btn--ghost:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.22);
  color: var(--text); transform: translateY(-1px);
}
.glass-btn--danger, .admin-btn-danger {
  background: color-mix(in srgb, var(--error) 12%, transparent);
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 25%, transparent);
}
.glass-btn--danger:hover {
  background: color-mix(in srgb, var(--error) 20%, transparent);
  border-color: color-mix(in srgb, var(--error) 50%, transparent);
  color: var(--error); transform: translateY(-2px);
}
.glass-btn--warn {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 25%, transparent);
}
.glass-btn--warn:hover {
  background: color-mix(in srgb, var(--warning) 20%, transparent);
  border-color: color-mix(in srgb, var(--warning) 50%, transparent);
  color: var(--warning); transform: translateY(-2px);
}
.glass-btn--active {
  background: color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,0.04));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08),
              0 0 14px color-mix(in srgb, var(--accent) 25%, transparent);
}
.glass-btn--active:hover { transform: none; }
.glass-btn--sm, .admin-btn-sm { padding: 7px 14px; font-size: 10px; border-radius: 8px; }
.glass-btn--icon { padding: 10px; border-radius: 50%; gap: 0; }
.glass-btn .glass-ripple {
  position: absolute; border-radius: 50%;
  width: 6px; height: 6px;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: glassRipple 0.55s cubic-bezier(0.4,0,0.2,1) forwards;
  pointer-events: none;
}

/* ── Inputs ── */
.glass-input, .admin-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text);
  font-family: inherit; font-size: 13px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.glass-input::placeholder { color: var(--muted); }
.glass-input:focus {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
select.glass-input { cursor: pointer; }

/* ── Badges ── */
.glass-badge, .admin-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 20px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10px; color: var(--accent); letter-spacing: 0.05em;
}
.glass-badge--accent, .admin-badge-info { --accent: #00e5ff; }
.glass-badge--warn, .admin-badge-warning { --accent: #fbbf24; color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.glass-badge--err, .admin-badge-danger   { --accent: #f43f5e; color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); border-color: color-mix(in srgb, var(--error) 25%, transparent); }
.glass-badge--ok, .admin-badge-success   { --accent: #22c55e; color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.glass-badge--neutral, .admin-badge-neutral { color: var(--muted); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.glass-badge--dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: pulse 2s ease-in-out infinite;
}

/* ── Tables ── */
.admin-table, .glass-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.admin-table th, .glass-table thead th {
  text-align: left; padding: 10px 16px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
  background: transparent;
}
.admin-table td, .glass-table tbody td {
  padding: 12px 16px; color: var(--admin-text-secondary);
  border-bottom: 1px solid var(--border);
  font-family: 'Inter', -apple-system, sans-serif; font-size: 12px;
  transition: background 0.15s ease;
}
.admin-table tbody tr:hover td, .glass-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}

/* ── Modals ── */
.glass-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(7,8,10,0.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: scaleIn 0.2s ease;
}
.glass-modal {
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--surface2) 60%, transparent);
  backdrop-filter: blur(var(--blur-card)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-card)) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px; width: 100%; max-width: 440px;
}
.glass-modal::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.22), rgba(255,255,255,0.10),
    rgba(255,255,255,0), rgba(255,255,255,0),
    rgba(255,255,255,0.10), rgba(255,255,255,0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.glass-modal__title { font-size: 18px; font-weight: 700; color: var(--text); }
.glass-modal__actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 20px; }

/* ── Toast ── */
#glass-toast-container {
  position: fixed; top: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.glass-toast {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  background: color-mix(in srgb, var(--surface2) 90%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  font-family: 'Inter', -apple-system, sans-serif; font-size: 12px; color: var(--text);
  max-width: 320px; min-width: 240px;
  pointer-events: all; position: relative; overflow: hidden;
  animation: toastIn 0.2s ease both;
}
.glass-toast.success, .glass-toast--ok   { border-left: 3px solid var(--accent); }
.glass-toast.error,   .glass-toast--err  { border-left: 3px solid var(--error); }
.glass-toast.info,    .glass-toast--info { border-left: 3px solid rgba(255,255,255,0.4); }
.glass-toast__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.glass-toast--ok  .glass-toast__dot, .glass-toast.success .glass-toast__dot { background: var(--accent); }
.glass-toast--err .glass-toast__dot, .glass-toast.error   .glass-toast__dot { background: var(--error); }
.glass-toast__progress {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 100%; transform-origin: left;
  animation: drainProgress var(--toast-duration, 3s) linear forwards;
}
.glass-toast--ok  .glass-toast__progress { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.glass-toast--err .glass-toast__progress { background: color-mix(in srgb, var(--error) 30%, transparent); }

/* Admin toast compat */
.admin-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.admin-toast {
  padding: 12px 20px; border-radius: var(--radius-sm); font-size: 13px;
  font-weight: 500; color: var(--text);
  background: color-mix(in srgb, var(--surface2) 90%, transparent);
  backdrop-filter: blur(20px); min-width: 240px;
  border: 1px solid rgba(255,255,255,0.1);
}
.admin-toast.success { border-left: 3px solid var(--success); }
.admin-toast.error   { border-left: 3px solid var(--error); }
.admin-toast.info    { border-left: 3px solid var(--accent); }


/* ── Floating glass pill (topbar) ── */
.glass-pill {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 10px;
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  z-index: 200;
}
.glass-pill::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.22), rgba(255,255,255,0.08),
    rgba(255,255,255,0), rgba(255,255,255,0.08),
    rgba(255,255,255,0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ── Notification panel ── */
.glass-notification-panel {
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}
.glass-notification-panel::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.18), rgba(255,255,255,0.06),
    rgba(255,255,255,0), rgba(255,255,255,0),
    rgba(255,255,255,0.06), rgba(255,255,255,0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.glass-notif-item {
  position: relative;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 12px;
  transition: background var(--transition);
}
.glass-notif-item:hover { background: rgba(255,255,255,0.03); }
.glass-notif-item:last-child { border-bottom: none; }
.glass-notif-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.glass-notif-title { font-size: 13px; color: var(--text); line-height: 1.4; }
.glass-notif-time  { font-size: 11px; color: var(--muted); margin-top: 3px; }
/* ── Skeleton ── */
.glass-skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── Status dots ── */
.admin-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.admin-status-dot.online  { background: var(--success); box-shadow: 0 0 8px rgba(34,197,94,0.5); }
.admin-status-dot.offline { background: var(--error);   box-shadow: 0 0 8px rgba(244,63,94,0.5); }

/* ── Loading / Empty ── */
.admin-loading { color: var(--muted); padding: 40px; text-align: center; animation: pulse 1.5s ease-in-out infinite; }
.admin-empty   { color: var(--muted); font-size: 13px; padding: 20px; text-align: center; }

/* ── Platform / Activity ── */
.admin-platform-name  { font-size: 13px; font-weight: 600; color: var(--text); }
.admin-platform-users { font-size: 11px; color: var(--muted); margin-top: 2px; }
.admin-activity-header { display: flex; justify-content: space-between; align-items: center; }
.admin-activity-action { font-size: 13px; color: var(--text); font-weight: 500; }
.admin-activity-time   { font-size: 11px; color: var(--muted); }
.admin-activity-detail { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Grids ── */
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.admin-card-header { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 16px; }

/* ── Mobile ── */
.admin-mobile-hamburger {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 1001;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(12px); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm);
  width: 40px; height: 40px; cursor: pointer;
  align-items: center; justify-content: center;
}
.admin-mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 99; animation: fadeUp 0.2s ease; }


/* ── Stat grid responsive (6 columns) ── */
@media (max-width: 1024px) {
  div[style*="repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  div[style*="repeat(6, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 1024px) { .admin-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .admin-mobile-hamburger { display: flex; }
  .glass-sidebar, .admin-sidebar { transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
  .glass-sidebar.mobile-open, .admin-sidebar.mobile-open { transform: translateX(0); }
  .admin-stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .admin-stats-grid { grid-template-columns: 1fr; } }