.admin-page {
  min-height: 100vh;
  background: #F2F3F7;
  padding-bottom: 7rem;
}
.admin-content {
  max-width: 1140px;
  margin: 0 auto;
  padding: 2.5rem 2rem 2rem;
  animation: fadeInUp 0.35s ease forwards;
}

.admin-sidebar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px;
  padding: 8px 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 16px 48px rgba(0,0,0,.2);
}
.admin-sidebar__sep {
  width:1px; height:24px;
  background:rgba(255,255,255,.1);
  flex-shrink:0; margin:0 2px;
}
.admin-sidebar__logo { display:none; }
@media (min-width:768px) {
  .admin-sidebar__logo {
    display:flex; align-items:center; padding:0 8px 0 4px;
  }
  .admin-sidebar__logo img { height:22px; width:auto; }
  .admin-sidebar__logo-sep {
    width:1px; height:24px;
    background:rgba(255,255,255,.1); margin-left:10px;
  }
}
.admin-nav-btn {
  display:flex; align-items:center; gap:0;
  padding:9px 10px; border-radius:40px;
  border:none; background:transparent;
  color:#555; font-family:inherit; font-size:0.82rem; font-weight:600;
  cursor:pointer; white-space:nowrap; overflow:hidden; max-width:44px;
  transition: max-width .35s cubic-bezier(.25,.46,.45,.94),
              padding .35s cubic-bezier(.25,.46,.45,.94),
              gap .35s cubic-bezier(.25,.46,.45,.94),
              background .2s, color .2s;
}
.admin-nav-btn svg { flex-shrink:0; }
.admin-nav-btn span { display:inline; opacity:0; transition:opacity .15s .1s; pointer-events:none; }
.admin-nav-btn:hover { background:rgba(255,255,255,.06); color:#aaa; }
.admin-nav-btn.active {
  background:rgba(233,78,50,.18); color:#E94E32;
  max-width:180px; padding:9px 14px 9px 11px; gap:7px;
}
.admin-nav-btn.active span { opacity:1; pointer-events:auto; transition:opacity .2s .2s; }
.admin-nav-btn--logout { color:#444; }
.admin-nav-btn--logout:hover { background:rgba(233,78,50,.1); color:#E94E32; }

.admin-header {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; margin-bottom:2rem;
}
.admin-header__left {}
.admin-header__title {
  font-size:1.75rem; font-weight:800; color:#1a1a1a;
  font-family:'Arial Black',Arial,sans-serif; line-height:1.1;
}
.admin-header__sub { font-size:.85rem; color:#888; margin-top:4px; }
.admin-header__right { display:flex; align-items:center; gap:.875rem; }
.admin-header__user {
  display:flex; align-items:center; gap:.75rem;
  background:#fff; border-radius:50px;
  padding:6px 14px 6px 6px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.admin-header__avatar {
  width:32px; height:32px; border-radius:50%;
  background:#E94E32; display:flex; align-items:center;
  justify-content:center; font-size:.78rem; font-weight:700;
  color:#fff; flex-shrink:0;
}
.admin-header__name { font-size:.82rem; font-weight:600; color:#1a1a1a; }

.dash-date-filter {
  display:flex; align-items:center; gap:.375rem;
  background:#fff; border-radius:10px; padding:5px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.dash-date-btn {
  padding:.4rem .875rem; border-radius:7px; border:none;
  background:transparent; color:#888; font-size:.75rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all .15s; white-space:nowrap;
}
.dash-date-btn:hover { background:#f5f5f5; color:#1a1a1a; }
.dash-date-btn.active {
  background:#1a1a1a; color:#fff;
}

.dash-section-label {
  display:flex; align-items:center; gap:.75rem;
  margin-bottom:.875rem; margin-top:.25rem;
}
.dash-section-label__text {
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1.2px; color:#aaa; white-space:nowrap;
}
.dash-section-label__line { flex:1; height:1px; background:#e0e0e0; }
.dash-section-label__action {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.3rem .75rem; border-radius:6px;
  border:1.5px solid #e0e0e0; background:#fff;
  font-size:.72rem; font-weight:700; color:#888;
  cursor:pointer; font-family:inherit; transition:all .15s; white-space:nowrap;
}
.dash-section-label__action:hover {
  border-color:#E94E32; color:#E94E32; background:#FDECEA;
}

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

.stat-card {
  background:#fff;
  border-radius:16px;
  padding:1.375rem 1.25rem 1.125rem;
  box-shadow:0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.04);
  position:relative; overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.stat-card:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.1), 0 12px 32px rgba(0,0,0,.07);
}
.stat-card__accent {
  position:absolute; top:0; left:0; right:0;
  height:3px; border-radius:16px 16px 0 0;
}
.stat-card__icon {
  width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.875rem;
}
.stat-card__value {
  font-size:1.85rem; font-weight:800; color:#1a1a1a; line-height:1;
  font-family:'Arial Black',Arial,sans-serif;
}
.stat-card__loading {
  width:48px; height:26px; background:#f0f0f0; border-radius:4px;
  animation:shimmer 1.2s infinite;
}
@keyframes shimmer { 0%,100%{opacity:1} 50%{opacity:.4} }
.stat-card__label { font-size:.75rem; color:#999; margin-top:5px; }
.stat-card__trend {
  font-size:.68rem; font-weight:700; margin-top:.25rem;
  display:inline-flex; align-items:center; gap:2px;
}
.stat-card__trend--up { color:#2E7D32; }
.stat-card__trend--down { color:#E94E32; }

.stat-detail-panel {
  background:#fff; border-radius:16px;
  padding:1.5rem 1.75rem;
  box-shadow:0 4px 24px rgba(0,0,0,.1);
  border:1px solid rgba(0,0,0,.05);
  margin-bottom:1.25rem;
  animation:slideDown .3s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-12px); }
  to   { opacity:1; transform:translateY(0); }
}
.stat-detail-panel__header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.25rem; padding-bottom:.875rem;
  border-bottom:2px solid #f5f5f5;
}
.stat-detail-panel__title {
  font-size:1rem; font-weight:700; color:#1a1a1a;
  display:flex; align-items:center; gap:.5rem;
}
.stat-detail-panel__close {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#f5f5f5; border:none; cursor:pointer; color:#666;
  transition:background .15s, color .15s;
}
.stat-detail-panel__close:hover { background:#FDECEA; color:#E94E32; }

.stat-detail-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr));
  gap:.875rem; margin-bottom:1.25rem;
}
.stat-detail-num {
  padding:1rem; background:#f8f8f8; border-radius:10px; text-align:center;
}
.stat-detail-num strong {
  display:block; font-size:1.5rem; font-weight:800;
  font-family:'Arial Black',Arial,sans-serif; line-height:1; color:#1a1a1a;
}
.stat-detail-num span { font-size:.72rem; color:#888; margin-top:3px; display:block; }
.stat-detail-num--accent strong { color:#E94E32; }

.detail-bar { margin-top:.25rem; }
.detail-bar__row {
  display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem;
}
.detail-bar__label { font-size:.78rem; color:#555; min-width:100px; font-weight:500; }
.detail-bar__track {
  flex:1; height:8px; background:#f0f0f0;
  border-radius:10px; overflow:hidden;
}
.detail-bar__fill {
  height:100%; border-radius:10px;
  transition:width .7s cubic-bezier(.25,.46,.45,.94);
}
.detail-bar__num {
  font-size:.78rem; font-weight:700; color:#1a1a1a;
  min-width:32px; text-align:right;
}
.detail-bar__pct {
  font-size:.68rem; color:#aaa; min-width:32px; text-align:right;
}

.admin-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.25rem; margin-bottom:1.25rem;
}
.admin-panel {
  background:#fff; border-radius:16px; padding:1.5rem;
  box-shadow:0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.04);
}
.admin-panel__header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.25rem;
}
.admin-panel__title {
  font-size:.9rem; font-weight:700; color:#1a1a1a;
  display:flex; align-items:center; gap:.5rem;
}
.admin-panel__link {
  font-size:.75rem; font-weight:700; color:#E94E32;
  background:none; border:none; cursor:pointer;
  font-family:inherit; display:inline-flex; align-items:center; gap:.25rem;
  padding:.3rem .625rem; border-radius:6px; transition:background .15s;
}
.admin-panel__link:hover { background:#FDECEA; }

.admin-list { display:flex; flex-direction:column; gap:.5rem; }
.admin-list__item {
  display:flex; align-items:center; justify-content:space-between;
  padding:.625rem .875rem; background:#F7F8FC;
  border-radius:9px; font-size:.82rem;
  cursor:pointer; transition:background .15s;
}
.admin-list__item:hover { background:#EEEFFE; }
.admin-list__name { font-weight:600; color:#1a1a1a; }
.admin-list__sub  { font-size:.7rem; color:#aaa; margin-top:1px; }
.admin-badge {
  padding:3px 8px; border-radius:20px;
  font-size:.66rem; font-weight:700; flex-shrink:0;
}
.admin-badge--wait   { background:#FFF3E0; color:#E65100; }
.admin-badge--ok     { background:#E8F5E9; color:#2E7D32; }
.admin-badge--reject { background:#FDECEA; color:#E94E32; }

.dash-reads-card {
  display:flex; align-items:center; gap:1rem;
  background:linear-gradient(135deg,#1a1a1a 0%,#E94E32 150%);
  border-radius:12px; padding:1.25rem 1.5rem; margin-bottom:1.25rem;
  color:#fff;
}
.dash-reads-card__num {
  font-size:2.25rem; font-weight:800; color:#fff; line-height:1;
  font-family:'Arial Black',Arial,sans-serif; flex-shrink:0;
}
.dash-reads-card__label { font-size:.8rem; color:rgba(255,255,255,.65); margin-top:2px; }

.admin-empty { text-align:center; padding:2rem 1rem; color:#ccc; font-size:.82rem; }
.admin-placeholder {
  min-height:calc(100vh - 10rem);
  display:flex; align-items:center; justify-content:center;
}

@media (max-width:768px) {
  .admin-content { padding:1.5rem 1rem; }
  .admin-row { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .admin-header__title { font-size:1.35rem; }
  .dash-date-filter { overflow-x:auto; max-width:100%; }
}
@media (max-width:480px) {
  .stat-grid { grid-template-columns:1fr 1fr; gap:.75rem; }
}

#admin-sidebar-mount {
  position:fixed; bottom:1.25rem; left:50%;
  transform:translateX(-50%);
  z-index:9999; pointer-events:auto;
}
#admin-sidebar-mount .admin-sidebar {
  position:static; bottom:auto; left:auto; transform:none;
}
