:root{
  --navy:#0E1A36;
  --navy-2:#16244A;
  --navy-3:#1B2755;
  --line:#25366099;
  --text:#E8ECF6;
  --muted:#9AA7C7;
  --soft:#C7D0E6;
  --orange:#E06000;
  --green:#21C168;
  --green-bg:#16331f;
  --yellow:#F5A623;
  --yellow-bg:#332a14;
  --red:#EF4444;
  --red-bg:#3a1717;
  --gap: clamp(8px, 1vw, 18px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--navy);
  color:var(--text);
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  overflow:hidden;
}

#app{
  height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:var(--gap);
  padding:clamp(10px,1.4vw,22px);
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:clamp(8px,1vw,14px);
}
.brand{ display:flex; align-items:center; gap:clamp(10px,1.2vw,18px); }
.logo{ height:clamp(34px,3.4vw,58px); width:auto; display:block; }
.brand-text h1{ font-size:clamp(18px,1.9vw,32px); font-weight:600; line-height:1.05; }
.subtitle{ color:var(--muted); font-size:clamp(11px,0.95vw,16px); }
.topbar-right{ display:flex; align-items:center; gap:clamp(12px,1.4vw,22px); }
.clock{ text-align:right; }
.clock-time{ font-size:clamp(20px,2.2vw,38px); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:1px; }
.clock-meta{ color:var(--muted); font-size:clamp(10px,0.9vw,15px); }
.live{
  display:flex; align-items:center; gap:8px; color:var(--green);
  font-size:clamp(11px,1vw,16px); font-weight:600;
  background:#0f2a1c; border:1px solid #21c16855; padding:6px 12px; border-radius:999px;
}
.live .dot{ width:10px; height:10px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }
.live.stale{ color:var(--yellow); background:#2a2410; border-color:#f5a62355; }
.live.stale .dot{ background:var(--yellow); }
.live.offline{ color:var(--red); background:#2a1414; border-color:#ef444455; }
.live.offline .dot{ background:var(--red); }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.fs-btn{
  background:var(--navy-2); color:var(--text); border:1px solid var(--line);
  width:clamp(34px,3vw,46px); height:clamp(34px,3vw,46px); border-radius:10px;
  font-size:clamp(16px,1.4vw,22px); cursor:pointer; line-height:1;
}
.fs-btn:hover{ background:var(--navy-3); }

/* ---------- Content ---------- */
.content{
  display:grid;
  grid-template-columns:clamp(180px,16vw,300px) 1fr;
  gap:var(--gap);
  min-height:0;
}
.side{ display:grid; grid-template-rows:auto auto auto 1fr; gap:var(--gap); min-height:0; }
.card{ background:var(--navy-2); border-radius:14px; padding:clamp(10px,1.1vw,18px); }

.gauge-card{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge{ width:clamp(110px,11vw,190px); height:auto; }
.gauge-track{ fill:none; stroke:#24345f; stroke-width:11; }
.gauge-arc{ fill:none; stroke:var(--green); stroke-width:11; stroke-linecap:round; transition:stroke-dashoffset .6s ease, stroke .4s; }
.gauge-center{ position:absolute; top:43%; left:0; right:0; transform:translateY(-50%); text-align:center; pointer-events:none; }
.gauge-pct{ font-size:clamp(22px,2.4vw,40px); font-weight:600; }
.gauge-label{ color:var(--muted); font-size:clamp(10px,0.9vw,15px); }
.gauge-foot{ color:var(--muted); font-size:clamp(10px,0.85vw,14px); margin-top:8px; text-align:center; }

.counters{ display:flex; flex-direction:column; gap:clamp(8px,0.9vw,14px); }
.counter{ display:flex; align-items:center; gap:10px; }
.counter .clabel{ color:var(--soft); font-size:clamp(12px,1vw,17px); flex:1; }
.counter b{ font-size:clamp(15px,1.3vw,22px); font-weight:600; }
.cdot{ width:clamp(11px,1vw,16px); height:clamp(11px,1vw,16px); border-radius:50%; }
.cdot.green{ background:var(--green); } .cdot.yellow{ background:var(--yellow); } .cdot.red{ background:var(--red); }

.sources{ min-height:0; overflow:hidden; }
.sources-title{ color:var(--muted); font-size:clamp(11px,0.9vw,15px); margin-bottom:10px; }
.source-list{ display:flex; flex-direction:column; gap:clamp(6px,0.7vw,11px); }
.source-row{ display:flex; align-items:center; gap:9px; font-size:clamp(12px,1vw,16px); }
.source-row .sname{ flex:1; color:var(--soft); }
.source-row .stag{ color:var(--muted); font-size:clamp(10px,0.8vw,13px); font-variant-numeric:tabular-nums; }
.sled{ width:10px; height:10px; border-radius:50%; }
.sled.ok{ background:var(--green); } .sled.bad{ background:var(--red); }

/* ---------- Grid de estados ---------- */
.grid-wrap{ display:grid; grid-template-rows:auto 1fr; gap:clamp(8px,0.9vw,14px); min-height:0; }
.grid-legend{ display:flex; align-items:center; gap:clamp(10px,1.2vw,20px); flex-wrap:wrap; color:var(--muted); font-size:clamp(11px,0.95vw,15px); }
.leg-item{ display:flex; align-items:center; gap:7px; }
.leg-dot{ width:clamp(8px,0.8vw,12px); height:clamp(8px,0.8vw,12px); border-radius:50%; }

.grid{
  display:grid;
  grid-template-columns:repeat(9, 1fr);
  grid-auto-rows:1fr;
  gap:clamp(6px,0.8vw,13px);
  min-height:0;
}
.tile{
  border-radius:12px; border:1px solid transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(4px,0.6vw,10px); gap:clamp(4px,0.5vw,9px);
  transition:background .4s, border-color .4s;
}
.tile.green{ background:var(--green-bg); border-color:#21c16855; }
.tile.yellow{ background:var(--yellow-bg); border-color:#f5a62399; }
.tile.red{ background:var(--red-bg); border-color:#ef444499; animation:blink 1.4s infinite; }
@keyframes blink{ 0%,100%{border-color:#ef4444; } 50%{border-color:#ef444433;} }
.tile-uf{ font-size:clamp(16px,1.7vw,30px); font-weight:600; letter-spacing:.5px; }
.tile-dots{ display:flex; gap:clamp(3px,0.4vw,6px); }
.tdot{ width:clamp(6px,0.6vw,10px); height:clamp(6px,0.6vw,10px); border-radius:50%; }
.tdot.green{ background:var(--green); } .tdot.yellow{ background:var(--yellow); } .tdot.red{ background:var(--red); }
.tdot.na{ background:transparent; border:1px solid #ffffff3a; }

/* ---------- Ticker ---------- */
.ticker{
  display:flex; align-items:center; gap:14px; background:var(--navy-2);
  border-radius:12px; padding:clamp(7px,0.8vw,13px) clamp(12px,1.2vw,20px); overflow:hidden;
}
.ticker-label{ display:flex; align-items:center; gap:8px; color:var(--yellow); font-weight:600; font-size:clamp(12px,1vw,17px); white-space:nowrap; }
.tk-ic{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--yellow); color:#2a2410; font-weight:700; font-size:13px; }
.ticker-viewport{ flex:1; overflow:hidden; }
.ticker-track{ display:inline-flex; gap:34px; white-space:nowrap; will-change:transform; }
.tk-item{ color:var(--soft); font-size:clamp(12px,1vw,17px); }
.tk-item b{ font-weight:600; }
.tk-item .s-red{ color:var(--red); } .tk-item .s-yellow{ color:var(--yellow); }
.tk-ok{ color:var(--green); font-size:clamp(12px,1vw,17px); font-weight:500; }

/* ---------- Histórico / sparkline / latência ---------- */
.hist-link{ color:var(--muted); font-size:clamp(11px,0.95vw,15px); text-decoration:none; border:1px solid var(--line); padding:6px 12px; border-radius:999px; }
.hist-link:hover{ color:var(--text); background:var(--navy-3); }
.spark-card{ display:flex; flex-direction:column; gap:8px; }
.spark-title{ color:var(--muted); font-size:clamp(11px,0.9vw,15px); }
.spark{ width:100%; }
.spark-svg{ width:100%; height:clamp(34px,4vh,60px); display:block; }
.spark-meta{ display:flex; justify-content:space-between; color:var(--muted); font-size:clamp(9px,0.75vw,12px); margin-top:4px; }
.spark-empty{ color:var(--muted); font-size:clamp(11px,0.9vw,14px); padding:10px 0; text-align:center; }
.sled.slow{ background:var(--yellow); }