.monitor-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.monitor-heading .button { flex-shrink: 0; }
.monitor-summary { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.monitor-state { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 3px 10px; background: #edf1ee; color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.monitor-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.monitor-state[data-state="ok"] { background: var(--ok-soft); color: var(--ok); }
.monitor-state[data-state="warning"], .monitor-state[data-state="stale"] { background: var(--warn-soft); color: var(--warn); }
.monitor-state[data-state="error"] { background: var(--alert-soft); color: var(--alert); }
.monitor-host, .monitor-services, .monitor-config { margin-bottom: 22px; overflow: hidden; }
.monitor-host h2, .monitor-services h2, .monitor-config h2 { font-size: 15px; }
.monitor-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.monitor-metric { padding: 22px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--color-border); min-width: 0; }
.monitor-metric:last-child { border-right: 0; }
.monitor-metric > span { font-size: 12px; color: var(--color-muted); }
.monitor-metric strong { font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.monitor-metric strong.monitor-uptime { font-size: 19px; margin-top: 7px; overflow-wrap: anywhere; }
.monitor-metric small { font-size: 11px; color: var(--color-muted); }
.monitor-metric meter { display: block; width: 100%; height: 8px; accent-color: var(--pine); }
.monitor-row-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 10px 18px; background: var(--surface-sunk); border-top: 1px solid var(--color-border); font-size: 11px; color: var(--color-muted); }
.monitor-service { padding: 18px 18px 0; border-bottom: 1px solid var(--color-border); }
.monitor-service:last-child { border-bottom: 0; }
.monitor-service-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.monitor-service h3 { font-size: 13px; font-weight: 600; }
.monitor-service-heading p { font-size: 11px; margin-top: 4px; }
.monitor-service-message { font-size: 12px; margin: 12px 0; }
.monitor-service .monitor-row-footer { margin: 0 -18px; }
.monitor-note { margin-top: 14px; font-size: 12px; color: var(--color-muted); max-width: 900px; line-height: 1.7; }
.monitor-empty { padding: 24px 18px; color: var(--color-muted); font-size: 13px; }
.monitor-config-key { display: block; color: var(--color-muted); margin-top: 4px; }
.monitor-url { overflow-wrap: anywhere; max-width: 480px; }
.monitor-instructions p + p { margin-top: 12px; }
.monitor-screen[data-unavailable] [data-monitor-results] { display: none; }
@media (max-width: 1100px) { .monitor-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .monitor-metric:nth-child(2) { border-right: 0; } .monitor-metric:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); } }
@media (max-width: 600px) { .monitor-heading { flex-wrap: wrap; gap: 0; margin-bottom: 18px; } .monitor-metric { padding: 16px; } .monitor-metric strong { font-size: 24px; } .monitor-service-heading { flex-wrap: wrap; } }


.meta-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px; margin-bottom: 18px; }
.meta-filters label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; min-width: 140px; flex: 1; }
.meta-filters select, .meta-filters input { width: 100%; }
.meta-filters .button { align-self: flex-end; }
.meta-statuses { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 18px; font-size: 12px; }
.meta-period { padding: 0 18px 18px; font-size: 12px; color: var(--color-muted); }
.meta-source { margin-bottom: 20px; overflow: hidden; }
.meta-source h2 { font-size: 16px; overflow-wrap: anywhere; }
.meta-source .panel-header { flex-wrap: wrap; }
.meta-source .panel-header .monitor-note { margin-top: 4px; }
.meta-source .monitor-metric strong { overflow-wrap: anywhere; }
.meta-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.meta-chart { display: block; width: 100%; height: auto; fill: var(--color-primary); }
.meta-chart-axis { stroke: var(--color-border); stroke-width: 1; }
.meta-chart-note { padding: 0 18px 14px; margin-top: 0; }
.meta-table { overflow: hidden; }
.meta-table summary { padding: 14px 18px; cursor: pointer; font-size: 13px; }
[data-meta][data-unavailable] [data-meta-results] { display: none; }
@media (max-width: 800px) { .meta-charts { grid-template-columns: 1fr; } }

.ga-section { margin: 24px 0 34px; }
.ga-section > h2 { margin-bottom: 8px; }
.ga-section > .monitor-note { margin-bottom: 14px; }
.ga-metrics { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ga-countries .table-container { max-height: 400px; overflow: auto; }

.report-loader { min-height: 190px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--surface); margin-bottom: 16px; text-align: center; }
.report-loader > span:last-child { font-size: 13px; color: var(--color-muted); }
.report-spinner { width: 28px; height: 28px; border: 3px solid var(--pine-soft); border-top-color: var(--color-primary); border-radius: 50%; animation: report-spin .8s linear infinite; }
@keyframes report-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .report-spinner { animation: none; } }

/* Alerts page */
.alerts-page { max-width: 820px; display: grid; gap: var(--space-4); }
.alerts-page .page-heading { margin-bottom: var(--space-2); }
.alerts-page .settings-content p + p { margin-top: 6px; }