.access-dashboard {
  margin-bottom: 17px;
}

.access-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 24px 0 13px;
}

.access-heading h2 {
  margin: 0 0 4px;
  font: 700 17px Manrope;
}

.access-heading p,
.access-heading small {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.access-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 17px;
}

.access-metrics article {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
}

.access-metrics strong {
  display: block;
  font: 800 23px Manrope;
}

.access-metrics small {
  color: var(--muted);
  font-size: 10px;
}

.access-metrics .online-pulse {
  position: absolute;
  top: 18px;
  right: 18px;
}

.access-content {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(290px, .78fr);
  gap: 17px;
}

.access-chart,
.online-card {
  padding: 20px;
}

.access-bars {
  display: flex;
  align-items: flex-end;
  height: 190px;
  gap: 14px;
  padding-top: 26px;
  border-bottom: 1px solid var(--line);
}

.access-bar-column {
  display: flex;
  flex: 1;
  align-items: center;
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

.access-bar-column span,
.access-bar-column small {
  color: var(--muted);
  font-size: 9px;
}

.access-bar-column i {
  width: min(42px, 72%);
  min-height: 2px;
  margin: 5px 0 8px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#1591a1, var(--teal));
}

.online-list {
  display: grid;
  gap: 4px;
}

.online-device {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.online-device > div {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}

.online-device strong,
.online-device small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-device strong { font-size: 11px; }
.online-device small,
.online-device time { color: var(--muted); font-size: 9px; }

.online-pulse {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #23a879;
  box-shadow: 0 0 0 4px rgba(35, 168, 121, .12);
}

.access-error { padding: 18px; color: var(--muted); }

.page-presence-dashboard { margin-bottom: 17px; }
.page-presence-card { padding: 20px; }
.live-label { display:flex;align-items:center;gap:7px;color:#168767;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px }
.live-label i { width:8px;height:8px;border-radius:50%;background:#23a879;box-shadow:0 0 0 4px rgba(35,168,121,.12) }
.page-presence-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:17px }
.page-presence-item { position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:84px;padding:14px 14px 20px;border:1px solid var(--line);border-radius:9px;overflow:hidden }
.page-presence-item>div { display:flex;min-width:0;flex-direction:column }
.page-presence-item strong { overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap }
.page-presence-item small { color:var(--muted);font-size:9px;font-weight:500 }
.page-presence-item>b { font:800 19px Manrope;color:var(--teal);white-space:nowrap }
.page-rank { width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#edf7f5;color:var(--teal);font-size:11px;font-weight:800 }
.page-presence-bar { position:absolute;right:0;bottom:0;left:0;height:4px;background:#edf1f2 }
.page-presence-bar i { display:block;height:100%;border-radius:0 4px 4px 0;background:var(--teal) }

@media (max-width: 900px) {
  .access-metrics { grid-template-columns: repeat(2, 1fr); }
  .access-content { grid-template-columns: 1fr; }
  .page-presence-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 520px) {
  .access-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .access-metrics { grid-template-columns: 1fr; }
  .page-presence-grid { grid-template-columns:1fr; }
}