.analytics-dashboard { max-width: 1100px; margin: 36px auto 56px; }
.admin-navigation { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--line); font-size: 14px; }
.admin-navigation a { padding: 8px 0; color: var(--muted); }
.admin-navigation a[aria-current="page"], .admin-navigation a:hover { color: var(--pink); }
.analytics-heading { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.analytics-heading h1 { font-size: clamp(30px, 4vw, 44px); margin: 9px 0; }
.analytics-heading .muted { max-width: 650px; }
.analytics-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0; flex-wrap: wrap; }
.analytics-controls .report-filters { margin: 0; }
.analytics-controls .muted { font-size: 12px; }
.analytics-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.analytics-metric { padding: 24px; border: 1px solid #49324f; border-radius: var(--radius); background: linear-gradient(140deg, #302036, #1a171f); }
.analytics-metric span { color: #dbcbdf; font-size: 14px; }
.analytics-metric strong { display: block; font-size: 44px; line-height: 1.2; margin: 14px 0 10px; font-variant-numeric: tabular-nums; }
.analytics-metric small { color: var(--muted); display: block; line-height: 1.6; font-size: 12px; }
.analytics-panel { margin-top: 24px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.analytics-panel h2, .analytics-explainer h2 { font-size: 22px; margin-bottom: 10px; }
.analytics-panel > .muted { font-size: 14px; }
.analytics-legend { display: flex; flex-wrap: wrap; gap: 20px; font-size: 12px; margin: 18px 0; color: var(--muted); }
.analytics-legend span::before { content: ""; width: 9px; height: 9px; display: inline-block; margin-right: 8px; border-radius: 50%; }
.analytics-views-key::before { background: #f194ce; }
.analytics-visitors-key::before { background: #a4a3ff; }
.analytics-chart { display: block; width: 100%; height: auto; }
.analytics-grid-lines { stroke: #34303c; fill: none; stroke-width: 1; }
.analytics-views-line, .analytics-visitors-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.analytics-views-line { stroke: #f194ce; }
.analytics-visitors-line { stroke: #a4a3ff; stroke-dasharray: 6 4; }
.analytics-views-point { fill: #f194ce; }
.analytics-visitors-point { fill: #a4a3ff; }
.analytics-chart-dates { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.analytics-daily-data { margin-top: 22px; }
.analytics-daily-data > summary { color: var(--pink); cursor: pointer; font-size: 14px; }
.analytics-table-wrap { overflow-x: auto; }
.analytics-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }
.analytics-table th { color: var(--muted); font-size: 12px; font-weight: 500; text-align: left; }
.analytics-table td, .analytics-table th { padding: 15px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.analytics-table td:last-child, .analytics-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.analytics-table td small { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }
.analytics-pages { table-layout: fixed; }
.analytics-pages th:last-child { width: 90px; }
.analytics-pages .text-link { white-space: normal; overflow-wrap: anywhere; }
.analytics-no-data { color: var(--muted); margin: 24px 0 6px; }
.analytics-journey { border-top: 1px solid var(--line); padding: 18px 0; }
.analytics-journey:first-child { margin-top: 22px; }
.analytics-journey summary { cursor: pointer; font-size: 13px; }
.analytics-journey summary strong { font-size: 15px; margin-right: 14px; }
.analytics-journey summary > span { display: inline-block; margin-right: 12px; line-height: 2; }
.analytics-journey summary > span:not(.pink-text) { color: var(--muted); }
.analytics-journey ol { margin: 18px 0 0 22px; padding: 0; }
.analytics-journey li { padding: 9px 0 9px 7px; font-size: 14px; overflow-wrap: anywhere; }
.analytics-journey time { display: inline-block; margin-right: 16px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.analytics-journey a:hover { color: var(--pink); }
.analytics-explainer { margin-top: 30px; padding: 4px; }
.analytics-explainer p { color: var(--muted); font-size: 13px; line-height: 1.9; margin-top: 12px; }
@media (max-width: 850px) {
  .analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .analytics-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .analytics-panel { padding: 18px 14px; }
  .analytics-metric { padding: 18px 14px; }
  .analytics-metric strong { font-size: 36px; }
  .analytics-journey summary > span { display: block; }
  .analytics-journey li a { display: block; }
  .analytics-table td, .analytics-table th { padding: 13px 4px; }
}

.analytics-metric-video { background: linear-gradient(140deg, #2a253d, #1a171f); border-color: #413b58; }
.analytics-metric .analytics-duration { font-size: clamp(24px, 3vw, 34px); line-height: 1.55; overflow-wrap: anywhere; }
.analytics-audience { display: grid; grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr); gap: 24px; }
.analytics-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 24px; }
.analytics-hour { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.analytics-hour > span { flex: 0 0 28px; }
.analytics-hour strong { flex: 0 0 25px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.analytics-hour meter { flex: 1; width: 100%; min-width: 0; height: 8px; border: 0; border-radius: 6px; background: #34303c; }
.analytics-hour meter::-webkit-meter-bar { border: 0; background: #34303c; }
.analytics-hour meter::-webkit-meter-optimum-value { background: #f194ce; }
.analytics-hour meter::-moz-meter-bar { background: #f194ce; }
.analytics-devices { list-style: none; padding: 0; margin: 24px 0 0; }
.analytics-devices li { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.analytics-devices span { color: var(--muted); font-size: 14px; }
.analytics-devices strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.analytics-playbacks-table, .analytics-accounts-table { min-width: 700px; }
.analytics-playbacks-table td:first-child { min-width: 220px; max-width: 340px; }
.analytics-playbacks-table .text-link { white-space: normal; overflow-wrap: anywhere; }
.analytics-playbacks-table time, .analytics-accounts-table time { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.analytics-status { display: inline-block; padding: 5px 8px; border: 1px solid #54415d; border-radius: 5px; color: #e4c0e5; font-size: 11px; }
.analytics-pagination { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 20px; margin-top: 24px; font-size: 13px; }
.analytics-account-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.analytics-account-metrics > div { border-left: 2px solid #805175; padding: 4px 0 4px 16px; }
.analytics-account-metrics dt { font-size: 12px; color: var(--muted); line-height: 1.6; }
.analytics-account-metrics dd { margin: 8px 0 0; font-size: 30px; font-variant-numeric: tabular-nums; }
.analytics-table-note { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 18px; }
.analytics-journey h3 { font-size: 13px; margin: 22px 0 0; color: #dcc6e1; }
.analytics-journey h3 + ol { margin-top: 8px; }
.analytics-journey-playback { display: block; font-size: 12px; color: var(--muted); margin-top: 7px; }
#playbacks, #journeys, #accounts { scroll-margin-top: 28px; }
@media (max-width: 850px) {
  .analytics-audience { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .analytics-devices { display: flex; gap: 24px; }
  .analytics-devices li { flex: 1; }
}
@media (max-width: 580px) {
  .analytics-hours { gap: 9px 16px; }
  .analytics-devices { gap: 16px; }
  .analytics-devices li { display: block; padding: 8px 0 16px; }
  .analytics-devices strong { display: block; margin-top: 10px; }
  .analytics-account-metrics { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .analytics-account-metrics > div { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding-right: 8px; }
  .analytics-account-metrics dd { margin-top: 0; }
}