* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --font-size: 100%; --bg-primary: #fff; --bg-secondary: #f5f7fa; --bg-tertiary: #ebebf0;
  --text-primary: #1a1a1a; --text-secondary: #666; --border-color: #e0e0e0; --accent-color: #0066cc;
  --success-color: #22c55e; --success-ink: #137a36; --danger-color: #ef4444; --warning-color: #f59e0b;
  --shadow: 0 1px 3px rgba(0,0,0,.1); --shadow-lg: 0 4px 12px rgba(0,0,0,.1);
}

html.dark-mode {
  --bg-primary: #1a1a1a; --bg-secondary: #252525; --bg-tertiary: #3a3a3a; --text-primary: #fff;
  --text-secondary: #b9b9b9; --border-color: #404040; --accent-color: #55a5f5; --success-ink: #5ee88e;
  --shadow: 0 1px 3px rgba(0,0,0,.3); --shadow-lg: 0 4px 12px rgba(0,0,0,.3);
}

html { font-size: var(--font-size); scroll-behavior: smooth; }
body { min-width: 300px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif; background: var(--bg-secondary); color: var(--text-primary); line-height: 1.6; transition: background-color .3s,color .3s; }
button, input { font: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-color), transparent 45%); outline-offset: 3px; }

.site-header { background: var(--bg-primary); border-bottom: 1px solid var(--border-color); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; }
.header-left, .header-right, .control-group { display: flex; align-items: center; }
.header-left { gap: 2rem; }
.header-right { gap: 1.5rem; }
.control-group { gap: .5rem; }
.logo { font-size: 1.5rem; line-height: 1.2; font-weight: 700; color: var(--accent-color); text-decoration: none; }
.user-info, .control-label, .timeline-summary { font-size: .87rem; color: var(--text-secondary); }
.value-output { min-width: 3.3rem; font-variant-numeric: tabular-nums; }
.font-size-slider { width: 120px; height: 4px; border-radius: 2px; background: var(--bg-tertiary); outline: none; appearance: none; }
.font-size-slider::-webkit-slider-thumb { appearance: none; width: 17px; height: 17px; border: 0; border-radius: 50%; background: var(--accent-color); cursor: pointer; }
.font-size-slider::-moz-range-thumb { width: 17px; height: 17px; border: 0; border-radius: 50%; background: var(--accent-color); cursor: pointer; }
.mode-toggle, .filter-btn { border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: background-color .2s,border-color .2s,color .2s; }
.mode-toggle { background: var(--bg-tertiary); padding: .5rem 1rem; font-size: .85rem; color: var(--text-primary); white-space: nowrap; }
.mode-toggle:hover { background: var(--border-color); }

main { max-width: 1400px; margin: 0 auto; padding: 2rem; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.dashboard-title { font-size: 2rem; line-height: 1.25; font-weight: 700; margin-bottom: .35rem; }
.dashboard-subtitle { color: var(--text-secondary); }
.overall-status { display: inline-flex; align-items: center; gap: .55rem; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 999px; padding: .5rem .85rem; font-size: .88rem; font-weight: 600; box-shadow: var(--shadow); white-space: nowrap; }
.overall-status span { width: .65rem; height: .65rem; background: var(--success-color); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb,var(--success-color),transparent 85%); }

.services-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.service-card, .timeline-section, .loading-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: var(--shadow); }
.service-card { padding: 1.5rem; transition: box-shadow .3s,transform .3s; min-width: 0; }
.service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.service-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.service-name { font-size: 1.25rem; font-weight: 600; }
.status-badge { display: inline-block; padding: .22rem .7rem; border-radius: 12px; font-size: .78rem; font-weight: 650; text-transform: capitalize; }
.status-badge.operational { background: rgba(34,197,94,.12); color: var(--success-ink); }
.status-badge.degraded { background: rgba(245,158,11,.13); color: #9a5d00; }
.status-badge.down { background: rgba(239,68,68,.12); color: var(--danger-color); }
.uptime-label { font-size: .9rem; color: var(--text-secondary); margin-bottom: .15rem; }
.uptime-percentage { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.uptime-bar { width: 100%; height: 28px; border-radius: 4px; display: grid; grid-template-columns: repeat(90,minmax(1px,1fr)); overflow: hidden; margin-top: .75rem; gap: 1px; padding: 2px; background: var(--bg-tertiary); }
.uptime-segment { min-width: 0; border-radius: 1px; border: 0; padding: 0; cursor: pointer; }
.uptime-segment:hover, .uptime-segment:focus-visible { opacity: .7; transform: scaleY(.8); }
.uptime-segment.up { background: var(--success-color); }
.uptime-segment.down { background: var(--danger-color); }
.uptime-segment.degraded { background: var(--warning-color); }
.bar-legend { display: flex; justify-content: space-between; margin-top: .35rem; font-size: .72rem; color: var(--text-secondary); }
.loading-card { grid-column: 1/-1; padding: 2rem; color: var(--text-secondary); text-align: center; }

.timeline-section { padding: 2rem; }
.timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; }
.timeline-title { font-size: 1.5rem; line-height: 1.3; font-weight: 700; }
.filter-group { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.filter-btn { padding: .5rem 1rem; background: var(--bg-secondary); font-size: .88rem; color: var(--text-secondary); }
.filter-btn:hover, .filter-btn.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }
.timeline-list { display: flex; flex-direction: column; gap: 1rem; }
.incident-item { border-left: 4px solid var(--success-color); padding: .5rem 0 .5rem 1rem; }
.incident-item.unresolved { border-left-color: var(--danger-color); }
.incident-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .35rem; }
.incident-title { font-weight: 600; }
.incident-service { display: inline-block; background: var(--bg-secondary); color: var(--text-secondary); padding: .2rem .5rem; border-radius: 4px; font-size: .78rem; white-space: nowrap; }
.incident-time, .incident-duration { font-size: .84rem; color: var(--text-secondary); }
.incident-duration { font-weight: 600; }
.incident-description { font-size: .9rem; color: var(--text-secondary); margin-top: .45rem; max-width: 90ch; }
.empty-state { text-align: center; padding: 2rem; color: var(--text-secondary); }
.error-state { color: var(--danger-color); }
.tooltip { position: fixed; z-index: 200; pointer-events: none; background: #111827; color: #fff; border-radius: 5px; box-shadow: var(--shadow-lg); padding: .45rem .6rem; font-size: .75rem; line-height: 1.3; max-width: 200px; }
.noscript { margin: 2rem; padding: 1rem; background: #fff4dd; color: #6e4300; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1000px) { .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px) {
  .site-header { position: static; flex-direction: column; gap: 1rem; align-items: stretch; padding: 1rem; }
  .header-left { justify-content: space-between; gap: 1rem; }
  .header-right { justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
  main { padding: 1rem; }
  .title-row { align-items: flex-start; flex-direction: column; }
  .dashboard-title { font-size: 1.5rem; }
  .services-grid { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
  .timeline-section { padding: 1rem; }
  .timeline-header { flex-direction: column; align-items: flex-start; }
  .filter-group { width: 100%; }
  .filter-btn { flex: 1 1 auto; }
  .incident-header { flex-direction: column; align-items: flex-start; gap: .35rem; }
}
@media (max-width: 430px) {
  .header-left { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .header-right, .control-group { align-items: flex-start; flex-direction: column; }
  .font-size-slider { width: min(240px,80vw); }
  .mode-toggle { width: 100%; }
  .service-card { padding: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }