.admin-nav {
  display:flex; align-items:center; gap:.9rem; padding:1rem 1.25rem;
  position:sticky; top:0; z-index:20; background:rgba(10,10,10,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.admin-nav-logo { display:flex; align-items:center; gap:.7rem; font-weight:800; }
.admin-nav-logo-box {
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--yellow); color:#000; font-size:1rem;
}
.admin-nav-items { display:flex; gap:.4rem; flex-wrap:wrap; margin-left:.75rem; }
.admin-nav-item {
  padding:.55rem .85rem; border-radius:999px; color:var(--text-2); font-size:.82rem;
  border:1px solid transparent;
}
.admin-nav-item.active {
  background:var(--yellow-bg); color:var(--yellow); border-color:var(--yellow-brd);
}
.admin-spacer { flex:1; }
.admin-body { padding:1.25rem; display:grid; gap:1rem; }
.admin-tab-panel {
  background:linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--border); border-radius:var(--r16); padding:1.2rem; box-shadow:var(--shadow-1);
}

/* Below this, .admin-nav-items used to just flex-wrap in place - on a phone
   with 9 tabs that grew the whole nav row into an awkwardly tall block with
   the logo/logout floating centered next to a 3-line stack of buttons.
   Reordering (via flex order, no HTML changes needed) into logo+logout on
   one line and a horizontally-scrolling tab strip below is the same "mobile
   tab bar" pattern used elsewhere in the app (e.g. the games list). */
@media (max-width:760px) {
  .admin-nav { flex-wrap:wrap; padding:.85rem 1rem; gap:.6rem; }
  .admin-nav-logo { order:1; }
  .admin-nav-logo span { display:none; }
  .admin-spacer { order:2; }
  /* "Logged in as X" is the least essential piece of the row and the one
     most likely to blow the 375px budget once the logo + both buttons are
     already on it - drops first rather than forcing a 3rd wrapped line. */
  #admin-welcome { display:none; }
  #admin-back-to-blip { order:4; }
  #admin-logout-btn { order:5; }
  .admin-nav-items {
    order:6; flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto; margin-left:0;
    padding-bottom:.25rem; -webkit-overflow-scrolling:touch;
  }
  .admin-nav-item { white-space:nowrap; flex:0 0 auto; }
  .admin-body { padding:.85rem; gap:.75rem; }
  .admin-tab-panel { padding:.9rem; }
}
.stat-cards { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); margin-bottom:1rem; }
.stat-card {
  padding:1rem; border-radius:var(--r12); border:1px solid var(--border); background:var(--card);
  display:grid; gap:.45rem;
}
.stat-card-icon {
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--yellow-bg); color:var(--yellow); font-size:1rem;
}
.stat-card-num { font-size:1.35rem; font-weight:800; }
.stat-card-label { color:var(--text-2); font-size:.82rem; }
.data-table-wrap { overflow:auto; border:1px solid var(--border); border-radius:var(--r12); background:var(--surface); }
.data-table { width:100%; border-collapse:collapse; min-width:720px; }
.data-table th, .data-table td { padding:.8rem .9rem; border-bottom:1px solid var(--border); text-align:left; font-size:.84rem; }