:root {
  --ink: #15231e;
  --muted: #64736d;
  --line: #dfe7e2;
  --surface: rgba(255, 255, 255, .86);
  --green: #1c9b69;
  --green-dark: #0d6c49;
  --green-soft: #e8f8f0;
  --amber: #dc8a17;
  --amber-soft: #fff5df;
  --red: #da4a4a;
  --red-soft: #fff0ef;
  --gray-soft: #eff3f1;
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: #f5f8f6;
  font-family: "DM Sans", sans-serif; overflow-x: hidden;
}
.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(2px); opacity: .48; }
.ambient-one { width: 580px; height: 580px; top: -330px; right: -100px; background: radial-gradient(circle, #b9ead5, transparent 68%); }
.ambient-two { width: 460px; height: 460px; left: -260px; top: 38%; background: radial-gradient(circle, #dcebd7, transparent 68%); }
.topbar { max-width: 1180px; margin: auto; height: 88px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.brand { color: var(--ink); text-decoration: none; font-family: Manrope, sans-serif; font-weight: 800; display: flex; gap: 12px; align-items: center; }
.brand-logo { display: block; width: auto; height: 58px; object-fit: contain; mix-blend-mode: multiply; }
.live { text-transform: uppercase; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; display: flex; align-items: center; gap: 8px; }
.live span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(28,155,105,.12); animation: pulse 2s infinite; }
main { max-width: 1180px; padding: 56px 28px 80px; margin: auto; }
.hero { max-width: 800px; }
.eyebrow, .section-kicker { margin: 0 0 10px; color: var(--green-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; }
h1, h2, h3 { margin: 0; font-family: Manrope, sans-serif; }
h1 { max-width: 720px; font-size: clamp(42px, 7vw, 72px); line-height: 1.02; letter-spacing: -.055em; }
.subtitle { color: var(--muted); margin: 20px 0 30px; font-size: 17px; }
.overall { min-height: 86px; max-width: 600px; padding: 17px 20px; border: 1px solid #bde5d1; border-radius: 18px; background: var(--green-soft); display: flex; gap: 15px; align-items: center; }
.overall-icon { width: 45px; height: 45px; flex: 0 0 45px; border-radius: 14px; display: grid; place-items: center; background: var(--green); }
.overall-icon span { width: 19px; height: 10px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg) translateY(-2px); }
.overall strong { display:block; font-family: Manrope, sans-serif; font-size: 16px; }.overall small { display: block; color: var(--muted); margin-top: 3px; }
.overall.degraded { background: var(--amber-soft); border-color: #f0d6a3; }.overall.degraded .overall-icon{background:var(--amber)}
.overall.outage { background: var(--red-soft); border-color: #f0c4c1; }.overall.outage .overall-icon{background:var(--red)}
.overall.paused,.overall.unknown,.overall.loading { background: var(--gray-soft); border-color: var(--line); }.overall.paused .overall-icon,.overall.unknown .overall-icon,.overall.loading .overall-icon{background:#81908a}
.overall.outage .overall-icon span,.overall.degraded .overall-icon span,.overall.unknown .overall-icon span { width: 3px; height: 20px; border: 0; background: white; transform: none; border-radius: 2px; }
.content-grid { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.content-grid:has(.documents-panel.hidden) { grid-template-columns: minmax(0, 1fr); }
.panel { border: 1px solid rgba(207,218,212,.85); background: var(--surface); backdrop-filter: blur(12px); border-radius: 22px; box-shadow: 0 14px 38px rgba(31,61,48,.055); }
.services-panel,.documents-panel { padding: 28px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }.section-head h2 { font-size: 22px; letter-spacing: -.03em; }
.section-kicker { margin-bottom: 5px; }
.refresh { border: 1px solid var(--line); background: white; color: var(--ink); border-radius: 10px; padding: 9px 12px; display: flex; align-items: center; gap: 7px; cursor: pointer; font: 600 12px "DM Sans"; }
.refresh:hover { border-color: #b7c8bf; }.refresh svg{width:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.refresh.spinning svg{animation:spin .8s linear infinite}
.service-row { display: grid; grid-template-columns: minmax(170px,1.2fr) minmax(130px,.8fr) auto; gap: 15px; align-items: center; padding: 18px 4px; border-top: 1px solid var(--line); }
.service-name { min-width: 0; }.service-name strong { display:block; overflow:hidden; text-overflow:ellipsis; }.service-name small,.counts,.updated { color: var(--muted); font-size: 12px; }.service-name small { margin-top:4px;display:block; }
.counts { display:flex; gap:12px; }.counts b { color:var(--ink); font-weight:700; }
.badge { justify-self:end; white-space:nowrap; padding: 7px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 11px; font-weight:800; }
.badge:before { content:""; display:inline-block; width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px; }
.badge.degraded { background:var(--amber-soft);color:#97600f}.badge.degraded:before{background:var(--amber)}
.badge.outage { background:var(--red-soft);color:#a83030}.badge.outage:before{background:var(--red)}
.badge.paused,.badge.unknown { background:var(--gray-soft);color:#5d6b65}.badge.paused:before,.badge.unknown:before{background:#82918b}
.updated { padding-top: 18px; border-top:1px solid var(--line); }
.empty { padding:40px 15px;text-align:center;color:var(--muted);border-top:1px solid var(--line) }.empty strong{display:block;color:var(--ink);margin-bottom:5px}
.skeleton { height: 66px; border-top:1px solid var(--line); background:linear-gradient(90deg,transparent,rgba(224,232,228,.55),transparent); background-size:200% 100%; animation: shimmer 1.5s infinite; }
.document { width:100%; padding:15px 2px; border:0; border-top:1px solid var(--line); background:transparent; text-align:left; cursor:pointer; display:flex;justify-content:space-between;gap:12px;color:var(--ink) }.document:hover strong{color:var(--green-dark)}
.document strong { font:600 13px "DM Sans";word-break:break-word }.document small{display:block;color:var(--muted);margin-top:4px}.document-arrow{font-size:20px;color:#96a49e}
.hidden { display:none; }
dialog { width:min(760px,calc(100% - 32px)); max-height:80vh; padding:0; border:1px solid var(--line); border-radius:20px; box-shadow:0 30px 90px rgba(16,40,29,.22); }
dialog::backdrop { background:rgba(15,29,23,.45);backdrop-filter:blur(4px) }.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:22px 25px;border-bottom:1px solid var(--line)}.dialog-head h3{font-size:17px;word-break:break-all}.dialog-head button{font-size:28px;line-height:1;border:0;background:none;cursor:pointer;color:var(--muted)}
pre { margin:0;padding:25px;max-height:60vh;overflow:auto;white-space:pre-wrap;word-break:break-word;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;background:#fbfcfb }
footer { max-width:1124px;margin:auto;padding:28px 0 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:12px }
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(28,155,105,0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{to{background-position:-200% 0}}
@media(max-width:780px){.topbar{height:72px;padding:0 18px}.brand-logo{height:48px}.brand #company{display:none}.live{font-size:0}.live:after{content:"AO VIVO";font-size:10px}main{padding:35px 18px 60px}.content-grid{grid-template-columns:1fr;margin-top:48px}.services-panel,.documents-panel{padding:20px}.service-row{grid-template-columns:1fr auto}.counts{grid-row:2;grid-column:1/-1}.badge{grid-column:2;grid-row:1}.section-head{align-items:flex-end}footer{margin:0 18px}.subtitle{font-size:15px}}