/* Center Status — visual no estilo Uptime Kuma (mikrotikstat.us) com a identidade da Center (Poppins, vermelho só em hover/foco). */
:root {
  --bg: #f6f7f9; --block: #ffffff; --text: #4b5563; --heading: #111827; --muted: #6b7280;
  --border: rgba(0, 0, 0, .08); --shadow: 0 1px 6px rgba(0, 0, 0, .05);
  --brand: #d32f2f;
  --up: #27ae60; --degraded: #f39c12; --down: #e74c3c; --maintenance: #3498db; --unknown: #7f8c8d;
  --bar-empty: #dfe3e6; --tip-bg: #111827; --tip-fg: #ffffff;
  --radius: .5rem;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141414; --block: #1e1e1e; --text: #a3a8ad; --heading: #f1f1f1; --muted: #7c8388;
    --border: rgba(255, 255, 255, .08); --shadow: 0 1px 6px rgba(0, 0, 0, .4);
    --bar-empty: #3a3f41; --tip-bg: #f1f1f1; --tip-fg: #141414;
  }
}
:root[data-theme="dark"] {
  --bg: #141414; --block: #1e1e1e; --text: #a3a8ad; --heading: #f1f1f1; --muted: #7c8388;
  --border: rgba(255, 255, 255, .08); --shadow: 0 1px 6px rgba(0, 0, 0, .4);
  --bar-empty: #3a3f41; --tip-bg: #f1f1f1; --tip-fg: #141414;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.container { max-width: 864px; margin: 0 auto; padding: 24px 16px 48px; }

/* Cabeçalho */
.head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.head__brand img { height: 56px; width: auto; border-radius: 8px; display: block; }
.head__text { flex: 1 1 280px; min-width: 0; }
.head__text h1 { margin: 0; font-size: 1.375rem; font-weight: 600; color: var(--heading); letter-spacing: -.01em; }
.head__text p { margin: 2px 0 0; font-size: .875rem; color: var(--muted); }
.head__nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.head__nav a, .head__nav button {
  font: inherit; font-size: .8125rem; font-weight: 500; color: var(--heading); text-decoration: none;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--block); cursor: pointer; line-height: 1.4;
}
.head__nav a:hover, .head__nav button:hover { border-color: var(--brand); color: var(--brand); }

/* Banner geral */
.overall { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 24px; border-radius: var(--radius); color: #fff; background: var(--unknown); margin-bottom: 24px; box-shadow: var(--shadow); }
.overall--up { background: var(--up); }
.overall--degraded { background: var(--degraded); }
.overall--down { background: var(--down); }
.overall--maintenance { background: var(--maintenance); }
.overall__icon { display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .22); flex-shrink: 0; }
.overall__text { flex: 1 1 260px; min-width: 0; }
.overall__text h2 { margin: 0; font-size: 1.25rem; font-weight: 600; }
.overall__text p { margin: 2px 0 0; font-size: .8125rem; opacity: .92; }
.overall__uptime { display: flex; gap: 20px; margin: 0; }
.overall__uptime div { text-align: right; }
.overall__uptime dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.overall__uptime dd { margin: 0; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Grupos e serviços */
.group { background: var(--block); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; }
.group__head { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.group__head h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--heading); }
.group__head p { margin: 2px 0 0; font-size: .8125rem; color: var(--muted); }
.group__note { margin: 0; padding: 10px 20px; font-size: .75rem; color: var(--muted); border-top: 1px solid var(--border); }
.service { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.service:last-of-type { border-bottom: 0; }
.service__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.service__name { flex: 1 1 240px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.service__name strong { color: var(--heading); font-weight: 600; }
.service__desc { font-size: .8125rem; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--unknown); flex-shrink: 0; align-self: center; }
.dot--up { background: var(--up); }
.dot--degraded { background: var(--degraded); }
.dot--down { background: var(--down); }
.dot--maintenance { background: var(--maintenance); }
.service__uptime { font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 64px; text-align: right; }
.service__status { font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; color: #fff; background: var(--unknown); min-width: 96px; text-align: center; }
.service__status--up { background: var(--up); }
.service__status--degraded { background: var(--degraded); }
.service__status--down { background: var(--down); }
.service__status--maintenance { background: var(--maintenance); }

/* Barra de 90 dias */
.bars { display: flex; gap: 2px; margin-top: 10px; height: 24px; }
.bar { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--bar-empty); position: relative; }
.bar--up { background: var(--up); }
.bar--degraded { background: var(--degraded); }
.bar--down { background: var(--down); }
.bar--maintenance { background: var(--maintenance); }
.bar:hover { filter: brightness(1.15); }
.bar[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--tip-bg); color: var(--tip-fg); font-size: .75rem; line-height: 1.3; padding: 6px 10px; border-radius: 6px;
  white-space: nowrap; z-index: 10; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); pointer-events: none;
}
.bar:nth-child(-n+12)[data-tip]:hover::after { left: 0; transform: none; }
.bar:nth-last-child(-n+12)[data-tip]:hover::after { left: auto; right: 0; transform: none; }
.bars__legend { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--muted); margin-top: 4px; }
.service__details { margin-top: 8px; font-size: .8125rem; }
.service__details summary { cursor: pointer; color: var(--muted); list-style: none; }
.service__details summary::-webkit-details-marker { display: none; }
.service__details summary::before { content: '▸ '; font-size: .7em; }
.service__details[open] summary::before { content: '▾ '; }
.service__details ul { margin: 6px 0 0; padding-left: 18px; font-family: var(--mono); font-size: .75rem; color: var(--text); }

/* Incidentes */
.incidents { margin-bottom: 20px; }
.incidents h3 { font-size: 1rem; font-weight: 600; color: var(--heading); margin: 0 0 10px; }
.incident { background: var(--block); border: 1px solid var(--border); border-left: 4px solid var(--degraded); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--shadow); }
.incident--maintenance { border-left-color: var(--maintenance); }
.incident--resolved, .incident--completed { border-left-color: var(--up); }
.incident header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.incident h4 { margin: 0; font-size: .9375rem; color: var(--heading); flex: 1 1 auto; }
.incident__type, .incident__status { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--muted); }
.incident__status { padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; }
.incident__meta { margin: 4px 0 0; font-size: .8125rem; color: var(--muted); }
.incident__updates { list-style: none; margin: 8px 0 0; padding: 0; font-size: .8125rem; }
.incident__updates li { padding: 6px 0; border-top: 1px dashed var(--border); }
.incident__updates time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.muted { color: var(--muted); font-size: .875rem; }

/* Rodapé */
.foot { margin-top: 32px; font-size: .75rem; color: var(--muted); text-align: center; }
.foot p { margin: 4px 0; }

/* Movimento (respeita preferência do usuário) */
@media (prefers-reduced-motion: no-preference) {
  .dot--down, .dot--degraded { animation: pulse 2s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, .45); } 50% { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); } }
}

/* Responsivo */
@media (max-width: 640px) {
  .container { padding: 16px 12px 40px; }
  .head__brand img { height: 44px; }
  .overall { padding: 16px; }
  .overall__uptime { width: 100%; justify-content: space-between; }
  .overall__uptime div { text-align: left; }
  .service { padding: 12px 14px; }
  .service__name { flex-basis: 100%; }
  .service__uptime { min-width: 0; margin-left: auto; }
  .bars { height: 18px; gap: 1px; }
  .bar[data-tip]:hover::after { white-space: normal; width: 220px; }
}