/* IP Panel · componentes. Os tokens (cores/fontes/raios) vem de tokens.css (design system). */
:root{
  --sand-tint:rgba(217,195,171,.10);
  --sand-border:rgba(217,195,171,.30);
  --maxw:1220px;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(1200px 480px at 82% -8%, rgba(232,80,2,.10), transparent 62%),
    var(--bg-app);
  color:var(--fg-1); font-family:var(--font-ui); line-height:1.5; font-size:15px; letter-spacing:.1px;
}
code{font-family:var(--font-mono); font-size:.9em; color:var(--fg-1); background:var(--bg-surface); padding:1px 5px; border-radius:4px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.muted{color:var(--fg-2); font-weight:400; font-size:13px}

/* login */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:20px}
.login-card{background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px 26px; width:100%; max-width:360px; box-shadow:var(--shadow-raised); display:flex; flex-direction:column; gap:12px}
.login-mark{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:18px}
.login-sub{margin:0 0 6px; color:var(--fg-2); font-size:13px}
.login-erro{background:var(--negative-tint); border:1px solid var(--negative-border); color:var(--negative); font-size:13px; padding:8px 12px; border-radius:var(--r-md)}
.login-card label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--fg-2)}
.login-card input{background:var(--bg-surface); border:1px solid var(--border); color:var(--fg-1); font-family:var(--font-ui); font-size:14px; padding:10px 12px; border-radius:var(--r-md); outline:none}
.login-card input:focus{border-color:var(--brand-border); box-shadow:var(--ring-brand)}
.login-card button{margin-top:6px; background:var(--brand); color:#fff; border:none; font-family:var(--font-display); font-weight:600; font-size:14px; padding:11px; border-radius:var(--r-md); cursor:pointer}
.login-card button:hover{background:var(--brand-deep)}

/* topbar */
header.top{position:sticky; top:0; z-index:40; background:linear-gradient(180deg,rgba(14,14,14,.94),rgba(14,14,14,.80)); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.top-in{display:flex; align-items:center; gap:12px; padding:14px 20px; max-width:var(--maxw); margin:0 auto; flex-wrap:wrap}
.mark{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:600}
.glyph{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(150deg,var(--brand-amber),var(--brand-deep)); color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px; box-shadow:0 0 0 1px rgba(255,255,255,.06),0 6px 18px rgba(232,80,2,.28)}
.mark b{font-size:16px}
.top-spacer{flex:1 1 40px}
.live{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11.5px; color:var(--brand-sand); border:1px solid var(--sand-border); background:var(--sand-tint); padding:5px 10px; border-radius:var(--r-pill)}
.live.crit{color:var(--negative); border-color:var(--negative-border); background:var(--negative-tint)}
.live.ok{color:var(--positive); border-color:var(--positive-border); background:var(--positive-tint)}
.live .dot{width:7px;height:7px;border-radius:50%;background:currentColor; animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.live .dot{animation:none}}
.btn-refresh,.btn-sair{font-family:var(--font-mono); font-size:11.5px; padding:6px 11px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--bg-surface); color:var(--fg-2); cursor:pointer; text-decoration:none}
.btn-refresh:hover{border-color:var(--brand-border); color:var(--fg-1)}
.btn-refresh[aria-busy="true"]{opacity:.5; pointer-events:none}

/* hero */
.lede{padding:30px 0 6px}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--brand); margin:0 0 10px}
.lede h1{font-family:var(--font-display); font-weight:600; font-size:clamp(26px,4vw,40px); line-height:1.08; margin:0 0 10px; text-wrap:balance; letter-spacing:-.5px}
.lede p.sub{margin:0; color:var(--fg-2); max-width:74ch; font-size:15.5px}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:24px 0 8px}
.kpi{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 16px 14px; position:relative; overflow:hidden}
.kpi .k-num{font-family:var(--font-display); font-weight:600; font-size:30px; line-height:1; letter-spacing:-.5px; font-variant-numeric:tabular-nums}
.kpi .k-lab{margin-top:7px; font-size:12.5px; color:var(--fg-2)}
.kpi .k-rail{position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand)}
.kpi.attn{border-color:var(--warning-border); background:linear-gradient(180deg,var(--warning-tint),transparent)}
.kpi.attn .k-num{color:var(--warning)} .kpi.attn .k-rail{background:var(--warning)}
.kpi.bad{border-color:var(--negative-border); background:linear-gradient(180deg,var(--negative-tint),transparent)}
.kpi.bad .k-num{color:var(--negative)} .kpi.bad .k-rail{background:var(--negative)}
.kpi.good .k-num{color:var(--positive)} .kpi.good .k-rail{background:var(--positive)}

/* sections */
section{margin:38px 0}
.s-head{display:flex; align-items:baseline; gap:12px; margin:0 0 14px; flex-wrap:wrap}
.s-head h2{font-family:var(--font-display); font-weight:600; font-size:20px; margin:0; letter-spacing:-.3px}
.s-head .s-eye{font-family:var(--font-mono); font-size:11px; color:var(--fg-3); letter-spacing:1px}
.s-head .s-note{margin-left:auto; font-size:12.5px; color:var(--fg-3)}

/* alertas ao vivo */
.alerta{display:flex; gap:11px; align-items:flex-start; padding:11px 14px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-surface); margin-bottom:8px}
.alerta .a-sev{width:4px; align-self:stretch; border-radius:2px; flex:none}
.alerta.critico{border-color:var(--negative-border)} .alerta.critico .a-sev{background:var(--negative)}
.alerta.aviso{border-color:var(--warning-border)} .alerta.aviso .a-sev{background:var(--warning)}
.alerta.info .a-sev{background:var(--info)}
.alerta .a-txt{font-size:13.5px; color:var(--fg-1)}
.alerta .a-nivel{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--fg-3); margin-left:auto; flex:none}
.tudo-ok{display:flex; align-items:center; gap:10px; padding:14px 16px; border:1px solid var(--positive-border); background:var(--positive-tint); border-radius:var(--r-md); color:var(--positive); font-size:13.5px}

/* saude ao vivo */
.saude-grupo{margin-bottom:16px}
.saude-grupo h3{font-family:var(--font-mono); font-size:11px; letter-spacing:1px; color:var(--fg-3); text-transform:uppercase; margin:0 0 8px}
.saude-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px}
.saude-item{display:flex; align-items:center; gap:10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px}
.saude-item .h-dot{width:9px;height:9px;border-radius:50%; flex:none}
.h-dot.no_ar,.h-dot.confere{background:var(--positive); box-shadow:0 0 8px rgba(52,211,153,.5)}
.h-dot.fora_do_ar,.h-dot.dns_falhou,.h-dot.inesperado{background:var(--negative)}
.h-dot.dns_mudou,.h-dot.instavel{background:var(--warning)}
.h-dot.observar{background:var(--brand-sand)}
.saude-item .h-host{font-family:var(--font-mono); font-size:12px; color:var(--fg-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.saude-item .h-meta{margin-left:auto; font-family:var(--font-mono); font-size:10.5px; color:var(--fg-3); flex:none; text-align:right}

/* atencao (gaps) */
.attn-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
.panel{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:2px 0}
.panel > .p-title{display:flex; align-items:center; gap:9px; padding:14px 16px 8px; font-family:var(--font-display); font-weight:600; font-size:14.5px}
.p-title .tag{font-family:var(--font-mono); font-size:11px; padding:2px 8px; border-radius:var(--r-pill)}
.tag.bad{background:var(--negative-tint); border:1px solid var(--negative-border); color:var(--negative)}
.tag.warn{background:var(--warning-tint); border:1px solid var(--warning-border); color:var(--warning)}
.tag.info{background:var(--info-tint); border:1px solid var(--info-border); color:var(--info)}
.rows{list-style:none; margin:0; padding:4px 0 8px}
.rows li{display:flex; gap:11px; padding:9px 16px; align-items:flex-start; border-top:1px solid rgba(255,255,255,.04)}
.rows li:first-child{border-top:none}
.sev{width:4px; align-self:stretch; border-radius:2px; flex:none; margin-top:1px; background:var(--fg-3)}
.rows .r-txt{font-size:13px; color:var(--fg-2)}

/* controls */
.controls{display:flex; gap:10px; align-items:center; margin:0 0 14px; flex-wrap:wrap}
.segs{display:inline-flex; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:3px}
.seg{border:none; background:transparent; color:var(--fg-2); font-family:var(--font-ui); font-size:13px; padding:6px 14px; border-radius:var(--r-pill); cursor:pointer; transition:.15s}
.seg[aria-pressed="true"]{background:var(--brand); color:#fff; box-shadow:0 2px 8px rgba(232,80,2,.3)}
.seg:focus-visible{outline:none; box-shadow:var(--ring-brand)}
.search{flex:1 1 200px; max-width:320px; display:flex; align-items:center; gap:8px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-md); padding:8px 12px}
.search .slash{font-family:var(--font-mono); color:var(--fg-3)}
.search input{border:none; background:transparent; color:var(--fg-1); font-family:var(--font-mono); font-size:13px; width:100%; outline:none}
.search input::placeholder{color:var(--fg-3)}
.cnt{font-family:var(--font-mono); font-size:12px; color:var(--fg-3); margin-left:auto}

/* domains table */
.tbl-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-surface)}
table{border-collapse:collapse; width:100%; min-width:660px}
thead th{font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--fg-3); text-align:left; padding:11px 16px; border-bottom:1px solid var(--border); font-weight:500}
tbody td{padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:top; font-size:13.5px}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.02)}
.dom{font-family:var(--font-mono); font-size:13px; color:var(--fg-1); white-space:nowrap}
.dom-sub{color:var(--fg-3); font-family:var(--font-mono); font-size:12px; margin-left:6px}
.flag{display:inline-block; margin-left:7px; font-size:10px; color:var(--brand-amber); border:1px solid var(--brand-border); border-radius:4px; padding:0 5px; vertical-align:middle; letter-spacing:.5px; font-family:var(--font-mono)}
.live-mini{display:inline-block; margin-left:7px; width:7px; height:7px; border-radius:50%; vertical-align:middle}
.serve{color:var(--fg-2); font-size:13px}
.loc{font-family:var(--font-mono); font-size:11.5px; color:var(--fg-3); white-space:nowrap}
.pill{display:inline-block; font-family:var(--font-mono); font-size:11px; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; border:1px solid transparent}
.p-ativo{background:var(--positive-tint); color:var(--positive); border-color:var(--positive-border)}
.p-dup,.p-incerto{background:var(--warning-tint); color:var(--warning); border-color:var(--warning-border)}
.p-orfao{background:var(--negative-tint); color:var(--negative); border-color:var(--negative-border)}
.p-desc,.p-plan{background:var(--info-tint); color:var(--info); border-color:var(--info-border)}
.p-parq{background:var(--sand-tint); color:var(--brand-sand); border-color:var(--sand-border)}

/* containers */
.cont-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px}
.cont{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 13px; display:flex; flex-direction:column; gap:5px}
.cont .c-top{display:flex; align-items:center; gap:8px}
.cont .c-dot{width:8px;height:8px;border-radius:50%; flex:none; background:var(--fg-3)}
.c-dot.ok{background:var(--positive); box-shadow:0 0 8px rgba(52,211,153,.5)}
.c-dot.down{background:var(--negative)}
.c-dot.unknown{background:var(--fg-3)}
.c-dot.orfao{background:var(--warning)}
.cont .c-name{font-family:var(--font-mono); font-size:12.5px; color:var(--fg-1)}
.cont .c-role{font-size:12px; color:var(--fg-2); line-height:1.4}
.cont .c-img{font-family:var(--font-mono); font-size:10.5px; color:var(--fg-3)}
.cont.down-box{border-color:var(--negative-border)}
.cont.orfao-box{border-color:var(--warning-border)}

/* crons */
.crons{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:8px}
.cron{display:flex; gap:11px; align-items:baseline; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 13px}
.cron .what{font-size:12.5px; color:var(--fg-2)}

/* services */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px}
.svc{background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:15px 16px}
.svc h3{font-family:var(--font-display); font-weight:600; font-size:14px; margin:0 0 11px; text-transform:capitalize}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-family:var(--font-mono); font-size:11px; padding:4px 9px; border-radius:var(--r-sm); background:var(--bg-surface-2); border:1px solid var(--border); color:var(--fg-2)}
.chip.legado{color:var(--fg-3); text-decoration:line-through; text-decoration-color:var(--fg-3)}
.chip.pend{color:var(--warning); border-color:var(--warning-border); background:var(--warning-tint)}

/* footer */
footer{border-top:1px solid var(--border); margin-top:46px; padding:22px 0 40px; color:var(--fg-3); font-size:12.5px}
footer .f-in{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between}
footer .src{font-family:var(--font-mono); font-size:11.5px}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; color:var(--fg-2)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:9px;height:9px;border-radius:50%; display:inline-block}
.legend .d-ok{background:var(--positive)} .legend .d-warn{background:var(--warning)} .legend .d-bad{background:var(--negative)} .legend .d-info{background:var(--info)} .legend .d-sand{background:var(--brand-sand)}

.erro-box{padding:16px; border:1px solid var(--negative-border); background:var(--negative-tint); color:var(--negative); border-radius:var(--r-md); font-size:14px}
@media (max-width:640px){ .lede{padding-top:22px} }