:root{color-scheme:dark;--bg:#080e1a;--panel:#131f33;--panel2:#192740;--line:#30415d;--ink:#f7fbff;--muted:#9eafca;--good:#36dc9b;--warn:#ffc35b;--bad:#ff6979}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif}body{padding:clamp(10px,1.2vw,20px)}.auth-pending .board{visibility:hidden}.auth-loading{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:40;font-size:1.3rem}.authenticated .auth-loading{display:none}.board{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:clamp(10px,1.2vw,18px);min-height:calc(100vh - 40px);max-width:1900px;margin:auto}.bar,.hero,.metric,.panel,footer{border:1px solid var(--line);border-radius:18px;background:var(--panel)}.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px}.brand{display:flex;gap:13px;align-items:center}.brandmark{display:grid;place-items:center;background:#21675d;color:#d8fff1;border-radius:12px;width:48px;height:48px;font-weight:900}.brand h1{margin:0;font-size:clamp(18px,1.7vw,27px);letter-spacing:.04em}.brand h1 span{color:var(--good)}small,.brand small,.header-meta span,.clock span{color:var(--muted)}.brand small{font-size:10px;font-weight:700;letter-spacing:.12em}.bar-right{display:flex;gap:18px;align-items:center}.header-meta,.clock{display:flex;flex-direction:column;text-align:right}.header-meta strong{font-size:14px}.header-meta span{font-size:11px}.clock strong{font-size:clamp(20px,2.2vw,32px);font-variant-numeric:tabular-nums}.clock span{font-size:11px}.head-link{border:1px solid var(--line);border-radius:10px;background:#1b2b45;color:var(--ink);padding:10px 12px;text-decoration:none;font-size:12px;font-weight:700;cursor:pointer}.hero{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:clamp(15px,2vw,28px);background:linear-gradient(120deg,#14243b,#102537)}.hero-status{display:flex;align-items:center;gap:18px}.dot{width:19px;height:19px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 7px #ffffff12;flex-shrink:0}.hero-status small,.hero-side small{display:block;font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--muted)}.hero-status strong{display:block;font-size:clamp(29px,4vw,64px);line-height:1.15;letter-spacing:.02em}.hero-status p{margin:4px 0 0;font-size:clamp(12px,1.1vw,17px);color:var(--muted)}.hero-side{display:flex;gap:clamp(14px,2vw,34px)}.hero-side>div{display:grid;gap:5px}.hero-side strong{font-size:clamp(17px,1.8vw,27px)}.hero-side span{font-size:11px;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,16px)}.metric{padding:clamp(12px,1.4vw,22px);min-width:0}.metric label{font-size:12px;font-weight:800;letter-spacing:.09em;color:var(--muted)}.metric strong{display:block;font-size:clamp(27px,3.4vw,55px);letter-spacing:-.035em;margin:10px 0}.track{height:9px;background:#33445d;border-radius:12px;overflow:hidden;margin-bottom:10px}.track i{display:block;width:0;height:100%;background:var(--good);transition:width .5s ease}.metric small{font-size:11px}.bottom{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(8px,1vw,16px);min-height:220px}.panel{padding:clamp(14px,1.5vw,23px);min-width:0}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800;font-size:13px;letter-spacing:.1em;margin-bottom:17px}.panel-title span{color:var(--muted);font-size:12px}.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.service{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel2);border:1px solid #324460;border-radius:10px;padding:12px}.service span{font-size:13px;font-weight:700}.status{font-size:11px;font-weight:800}.ok{color:var(--good)!important}.warn{color:var(--warn)!important}.bad{color:var(--bad)!important}.optional{color:var(--muted)!important}.network-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.network-grid>div{display:grid;gap:6px;padding:11px;border-radius:10px;background:var(--panel2);border:1px solid #324460}.network-grid span{font-size:12px;color:var(--muted)}.network-grid strong{font-size:clamp(14px,1.35vw,20px)}.hint{margin-top:14px;color:var(--muted);font-size:11px}footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px}.alert{display:flex;align-items:center;gap:11px;font-weight:700;font-size:clamp(12px,1.2vw,17px)}.signal{width:9px;height:9px;border-radius:50%;background:var(--muted)}.footer-right{display:flex;gap:18px;font-size:11px;color:var(--muted);white-space:nowrap}.board.good .dot,.board.good .signal{background:var(--good)}.board.warning .dot,.board.warning .signal{background:var(--warn)}.board.critical .dot,.board.critical .signal{background:var(--bad)}@media(max-width:1050px){.board{min-height:calc(100vh - 20px)}.bar{padding:10px 13px}.hero{padding:15px}.hero-side{gap:12px}.metric{padding:12px}.metric strong{font-size:clamp(23px,3vw,38px)}.bottom{min-height:190px}.service{padding:9px}.service span{font-size:11px}.network-grid>div{padding:9px}}@media(max-width:720px){.bar-right{gap:8px}.header-meta{display:none}.brand small{display:none}.head-link{padding:7px}.hero{display:block}.hero-side{margin-top:16px;justify-content:space-between}.metrics{grid-template-columns:repeat(3,1fr)}.bottom{grid-template-columns:1fr}.footer-right{display:none}}@media(max-height:760px) and (min-width:721px){body{padding:8px}.board{gap:8px;min-height:calc(100vh - 16px)}.bar{padding:7px 13px}.hero{padding:12px 16px}.hero-status strong{font-size:32px}.metric{padding:10px}.metric strong{font-size:30px;margin:5px 0}.panel{padding:11px}.panel-title{margin-bottom:9px}.service{padding:8px}.hint{margin-top:7px}footer{padding:8px 12px}}

/* v10.1: minigraficos integrados ao espaco disponivel dos paineis */
.panel{display:flex;flex-direction:column}
.mini-title{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;font-size:11px;font-weight:800;letter-spacing:.07em;color:var(--muted)}
.mini-title span{font-weight:600;letter-spacing:0;color:var(--ink)}
.mini-chart{height:clamp(70px,11vh,115px);min-height:70px;margin-top:6px;color:var(--muted);font-size:11px}
.mini-chart svg{width:100%;height:100%;display:block;overflow:visible}
@media(max-height:760px) and (min-width:721px){.mini-title{padding-top:8px;font-size:10px}.mini-chart{height:70px;min-height:70px;margin-top:3px}}

/* v10.2 — layout compacto para netbooks, gauges circulares */
.board{grid-template-rows:auto auto auto minmax(0,1fr) auto auto;}
.metric{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:4px;padding:10px 7px;}
.metric label{align-self:stretch;white-space:nowrap;font-size:11px;}
.metric small{font-size:10px;line-height:1.1;white-space:nowrap;}
.gauge{--value:0;--gauge-color:var(--good);position:relative;display:grid;place-items:center;width:clamp(66px,8.8vh,114px);aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--gauge-color) calc(var(--value)*1%),#33445d 0);margin:0 auto;transition:background .3s;}
.gauge::before{content:"";position:absolute;inset:9px;background:var(--panel);border-radius:50%;}
.gauge-center{z-index:1;display:flex;align-items:center;justify-content:center;}
.metric .gauge strong{font-size:clamp(17px,2.1vw,31px);letter-spacing:-.04em;margin:0;}
.track{display:none;}
.charts{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(8px,1vw,16px);min-height:0;}
.chart-panel{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:8px 12px;min-width:0;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.mini-title{margin-top:0;padding-top:0;font-size:10px;flex:0 0 auto;}
.mini-chart{height:clamp(65px,10vh,95px);min-height:0;flex:1;margin-top:2px;overflow:hidden;}
.mini-chart svg{overflow:hidden;}
.bottom{min-height:0;}
.panel{min-height:0;}
@media(max-height:760px) and (min-width:721px){
 body{padding:5px;overflow:hidden;}
 .board{height:calc(100dvh - 10px);min-height:0;grid-template-rows:auto auto auto minmax(0,1fr) minmax(74px,14vh) auto;gap:6px;}
 .bar{padding:5px 10px;min-height:49px;}
 .brandmark{width:37px;height:37px;}
 .brand h1{font-size:19px;}
 .brand small{font-size:8px;}
 .clock strong{font-size:21px;}
 .head-link{padding:7px 9px;}
 .hero{padding:8px 12px;min-height:62px;}
 .hero-status strong{font-size:clamp(24px,3vw,34px);}
 .hero-status small,.hero-side small{font-size:9px;}
 .hero-status p{font-size:10px;margin-top:1px;}
 .hero-side strong{font-size:15px;}
 .hero-side span{font-size:9px;}
 .metrics{gap:6px;}
 .metric{gap:3px;padding:6px 4px;}
 .metric label{font-size:9px;}
 .metric small{font-size:9px;}
 .gauge{width:clamp(52px,10.5vh,75px);}
 .gauge::before{inset:7px;}
 .metric .gauge strong{font-size:clamp(15px,1.65vw,22px);}
 .bottom{gap:6px;}
 .panel{padding:8px 10px;overflow:hidden;}
 .panel-title{font-size:11px;margin-bottom:7px;}
 .panel-title span{font-size:9px;}
 .service-grid,.network-grid{gap:5px;}
 .service{padding:6px 7px;}
 .service span,.network-grid span,.status{font-size:10px;}
 .network-grid>div{padding:5px 7px;gap:2px;}
 .network-grid strong{font-size:13px;}
 .hint{margin-top:5px;font-size:9px;}
 .charts{gap:6px;}
 .chart-panel{padding:5px 9px;}
 .mini-title{font-size:9px;}
 .mini-chart{height:auto;min-height:0;margin-top:1px;}
 footer{padding:5px 10px;min-height:26px;}
 .alert{font-size:11px;}
 .footer-right{font-size:9px;}
}
@media(max-width:720px){.charts{grid-template-columns:1fr}.board{grid-template-rows:auto}.gauge{width:72px;}}

/* v10.3 — o espaço dos paineis vira altura útil para os gráficos. */
@media (min-width:721px) and (max-height:760px) {
  .board {
    grid-template-rows: auto auto auto clamp(126px, 22vh, 150px) minmax(98px, 1fr) auto;
  }
  .bottom { min-height:0; max-height:150px; }
  .panel { justify-content:flex-start; }
  .charts { min-height:0; height:100%; }
  .chart-panel { min-height:0; }
  .mini-chart { height:100%; flex:1 1 auto; min-height:0; }
  .mini-chart svg { width:100%; height:100%; }
}
@media (min-width:721px) and (max-height:580px) {
  .board { grid-template-rows: auto auto auto 119px minmax(70px,1fr) auto; gap:4px; }
  .bar { min-height:43px; }
  .hero { min-height:55px; }
  .gauge { width:clamp(45px,9vh,57px); }
  .metric { padding:4px; }
  .panel {padding:6px 8px;}
  .service,.network-grid>div { padding:4px 6px; }
}