/* NOC8 Monitor v3 - visual inspirado no Sniffnet (abas no topo, cartoes, grafico in/out, temas) */

:root, [data-theme="noc8"] {
  --bg: #0b1513; --surface: #11201c; --surface-2: #172a25; --border: #22392f;
  --text: #e6f2ee; --muted: #93b0a7; --faint: #64807a;
  --accent: #1FA077; --accent-ink: #04140f;
  --in: #1FA077; --out: #f5a524;
  --ok: #34d399; --warn: #f5b84a; --crit: #ff6370; --info: #5aa9ff;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.28);
  color-scheme: dark;
}
[data-theme="azul-escuro"] {
  --bg: #070d1f; --surface: #0d1630; --surface-2: #132042; --border: #1f2f5c;
  --text: #e4ebfb; --muted: #94a6cf; --faint: #63759f;
  --accent: #4f8dff; --accent-ink: #04102b;
  --in: #4f8dff; --out: #f5a524;
  --ok: #34d399; --warn: #f5b84a; --crit: #ff6370; --info: #7cb4ff;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,5,20,.45);
  color-scheme: dark;
}
[data-theme="cinza"] {
  --bg: #121314; --surface: #1b1c1e; --surface-2: #232527; --border: #333538;
  --text: #ececed; --muted: #a2a5aa; --faint: #6f7277;
  --accent: #b9c0ca; --accent-ink: #141517;
  --in: #b9c0ca; --out: #f5a524;
  --ok: #34d399; --warn: #f5b84a; --crit: #ff6370; --info: #7cb4ff;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
[data-theme="yeti-night"] {
  --bg: #17171a; --surface: #212125; --surface-2: #2a2a30; --border: #34343b;
  --text: #ececf0; --muted: #9b9ba6; --faint: #6c6c76;
  --accent: #a675ff; --accent-ink: #ffffff;
  --in: #a675ff; --out: #ff8f3f;
  --ok: #3ecf8e; --warn: #f5b84a; --crit: #ff5d6c; --info: #5aa9ff;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.25);
  color-scheme: dark;
}
[data-theme="yeti-day"] {
  --bg: #f3f3f6; --surface: #ffffff; --surface-2: #f0eff5; --border: #e1e0e8;
  --text: #1d1c22; --muted: #66646f; --faint: #9a98a3;
  --accent: #7a3cff; --accent-ink: #ffffff;
  --in: #7a3cff; --out: #e8661a;
  --ok: #138a55; --warn: #b7791f; --crit: #d42f45; --info: #2c6fd6;
  --shadow: 0 1px 2px rgba(20,20,40,.06), 0 6px 20px rgba(20,20,40,.06);
  color-scheme: light;
}
[data-theme="deep-sea"] {
  --bg: #08182a; --surface: #0e2236; --surface-2: #132c45; --border: #1d3a57;
  --text: #e3f1fb; --muted: #8fb0c8; --faint: #5d7f99;
  --accent: #35c4de; --accent-ink: #04202a;
  --in: #35c4de; --out: #f6b24a;
  --ok: #3fd39a; --warn: #f6b24a; --crit: #ff6b7d; --info: #63b3ff;
  --shadow: 0 8px 24px rgba(0,10,25,.35);
  color-scheme: dark;
}
[data-theme="mon-amour"] {
  --bg: #fbf0f3; --surface: #ffffff; --surface-2: #f8e6ec; --border: #f0d3dd;
  --text: #3a1f2b; --muted: #80596a; --faint: #b48e9d;
  --accent: #d6336c; --accent-ink: #ffffff;
  --in: #d6336c; --out: #6f4ae0;
  --ok: #1f8f5f; --warn: #b7791f; --crit: #c92a3a; --info: #3b6fd1;
  --shadow: 0 6px 20px rgba(120,30,60,.08);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mono, code, .ip { font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace; font-size: 12.5px; }
a { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- topo ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  /* mesma margem lateral do conteudo (--gutter): logo alinhado com o titulo da pagina em qualquer largura */
  padding: 10px var(--gutter); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
/* marca padrao da familia NOC8 (mesmo icone do NOC8-ACS): icone verde + NOC8·PRODUTO */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-img { width: 36px; height: 36px; border-radius: 9px; object-fit: contain; flex: none; display: block; }
.brand-txt { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1; }
.wordmark { display: flex; align-items: center; font-weight: 800; font-size: 17px; letter-spacing: .02em; white-space: nowrap; }
.wm-noc8 { color: var(--text); }
.wm-dot { color: #1FA077; margin: 0 3px; font-size: 20px; line-height: 0; }
.wm-prod { color: #1FA077; }
.brand-txt small { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; white-space: nowrap; }
/* logo do cliente vindo do GERENCIA: imagem inteira no lugar do icone + nome */
.brand.has-logo .brand-img { width: auto; max-width: 240px; height: 46px; border-radius: 8px; }
.brand.has-logo .wordmark { display: none; }
.brand-login { justify-content: center; margin-bottom: 6px; }
.brand-login .brand-img { width: 44px; height: 44px; border-radius: 11px; }
.brand-login .wordmark { font-size: 22px; }
.brand-login.has-logo .brand-img { height: 76px; max-width: 340px; }
.suspended { background: color-mix(in srgb, var(--crit) 16%, var(--surface)); color: var(--text); border-bottom: 1px solid var(--crit);
  padding: 10px 20px; text-align: center; font-weight: 600; }
.suspended a { color: var(--text); margin-left: 8px; }
/* centraliza quando cabe; quando nao cabe, rola a partir do inicio (justify-content:center cortaria a 1a aba) */
.tabs { display: flex; justify-content: flex-start; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.tabs > :first-child { margin-left: auto; }
.tabs > :last-child { margin-right: auto; }
.tab {
  position: relative; border: 0; background: transparent; padding: 8px 11px; border-radius: 10px;
  color: var(--muted); cursor: pointer; white-space: nowrap; font-weight: 550;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab[aria-selected="true"] { color: var(--text); background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
.tab.has-sub { display: inline-flex; align-items: center; gap: 2px; }
.tab .caret { font-size: 10px; margin-left: 4px; opacity: .8; transition: transform .15s; }
.tab[aria-expanded="true"] .caret { transform: rotate(180deg); }
.submenu { position: fixed; z-index: 40; min-width: 210px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.submenu button { display: flex; align-items: center; justify-content: space-between; text-align: left; border: 0; background: none;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; color: var(--muted); font-weight: 550; }
.submenu button:hover, .submenu button:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }
.submenu button[aria-current="page"] { color: var(--text); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: var(--crit); color: #fff; font-size: 11px; font-weight: 700;
}
.toolbar { display: flex; align-items: center; gap: 8px; }

.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 10px; border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 12.5px; }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); font-weight: 600; }

.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.icon-btn:hover { color: var(--text); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 2s infinite; }
.paused .live-dot { background: var(--faint); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- layout ---------- */
/* conteudo ocupa a largura toda da tela; a margem lateral cresce com a tela (celular 12px ... monitor grande 32px) */
:root { --gutter: clamp(12px, 1.6vw, 32px); }
main { padding: 20px var(--gutter); }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 20px; }
.page-head p { margin: 2px 0 0; color: var(--muted); }
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cols-2 { grid-template-columns: 2fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); min-width: 0; }
.card h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 650; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.kpi .label { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.kpi .value { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .sub { color: var(--faint); font-size: 12px; margin-top: 2px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw-in { background: var(--in); } .sw-out { background: var(--out); }

/* ---------- grafico ---------- */
.chart { position: relative; height: 280px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--border); stroke-dasharray: 3 4; }
.chart .axis { fill: var(--faint); font-size: 11px; }
.chart .area-in:not([fill]) { fill: color-mix(in srgb, var(--in) 22%, transparent); }
.chart .line-in { stroke: var(--in); fill: none; stroke-width: 2; }
.chart .area-out:not([fill]) { fill: color-mix(in srgb, var(--out) 18%, transparent); }
.chart .line-out { stroke: var(--out); fill: none; stroke-width: 2; }
.chart .cursor { stroke: var(--muted); stroke-width: 1; }
.tooltip {
  position: absolute; pointer-events: none; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow); white-space: nowrap;
}
.legend { display: flex; gap: 14px; color: var(--muted); font-size: 12px; align-items: center; }

/* ---------- listas com barra (Top hosts/servicos) ---------- */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.bar-row .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.bar-row .num { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.bar-track { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; display: flex; }
.bar-in { background: var(--in); } .bar-out { background: var(--out); } .bar-one { background: var(--accent); }
.cc { display: inline-block; min-width: 24px; padding: 0 4px; border-radius: 4px; background: var(--surface-2); color: var(--muted); font-size: 10.5px; font-weight: 700; text-align: center; letter-spacing: .4px; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; }
.tag.in { color: var(--in); } .tag.out { color: var(--out); }
.star { border: 0; background: none; cursor: pointer; color: var(--faint); padding: 0 2px; font-size: 14px; line-height: 1; }
.star[aria-pressed="true"] { color: var(--warn); }

/* ---------- tabelas ---------- */
.table-wrap { overflow: auto; border-radius: 12px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 650; z-index: 1; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th .arrow { opacity: .8; margin-left: 4px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
tbody tr:last-child td { border-bottom: 0; }
.link-btn { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; text-decoration: none; }
.link-btn:hover { color: var(--accent); text-decoration: underline; }
.empty { padding: 32px; text-align: center; color: var(--muted); }

/* ---------- formularios ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.field { display: grid; gap: 4px; }
.field > span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
input, select {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; min-width: 0;
}
input:focus, select:focus, button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
.btn {
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; padding: 7px 14px; cursor: pointer; font-weight: 600;
}
a.btn { text-decoration: none; display: inline-flex; align-items: center; color: inherit; }
a.btn.primary { color: var(--accent-ink); }
.btn:hover { border-color: var(--faint); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.danger { color: var(--crit); }
.btn.small { padding: 4px 10px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; align-items: end; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch input { appearance: none; width: 36px; height: 20px; border-radius: 999px; background: var(--border); position: relative; padding: 0; cursor: pointer; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked { background: var(--ok); }
.switch input:checked::after { transform: translateX(16px); }
.hint { color: var(--muted); font-size: 12.5px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--muted); font-size: 12.5px; }

/* ---------- provedores ---------- */
.providers { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.prov .top { display: flex; justify-content: space-between; align-items: baseline; }
.prov .pname { font-weight: 700; }
.prov .share { color: var(--muted); font-size: 12px; }
.prov .rates { display: flex; gap: 14px; margin: 10px 0 8px; font-variant-numeric: tabular-nums; }
.prov .rates b { display: block; font-size: 16px; }
.prov.idle { opacity: .55; }
.prov[data-provider] { cursor: pointer; }
.prov[data-provider]:hover, .prov.open { border-color: var(--accent); }
.prov[data-provider]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prov-panel { grid-column: 1 / -1; display: grid; gap: 12px; }
/* detalhe do provedor: AS e Servicos lado a lado dividindo a largura toda (antes: auto-fit criava colunas de 260px e
   a tabela de AS vazava os numeros sobre a coluna de servicos) */
.prov-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; }
.prov-detail table { width: 100%; table-layout: fixed; }
.prov-detail td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-detail td.num { width: 110px; text-align: right; }
@media (max-width: 760px) { .prov-detail { grid-template-columns: minmax(0, 1fr); } }
.prov-detail .wide { grid-column: 1 / -1; }
.prov-detail h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mini-bar { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-bottom: 8px; }
.mini-bar .bar-track { grid-column: 1 / -1; }

/* ---------- eventos ---------- */
.events { list-style: none; margin: 0; padding: 0; }
.events li { display: grid; grid-template-columns: 8px auto 1fr; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border); align-items: center; }
.events li:last-child { border-bottom: 0; }
.sev { width: 8px; height: 8px; border-radius: 50%; background: var(--info); }
.sev.warning { background: var(--warn); } .sev.critical { background: var(--crit); }
.events time { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); }
.status-pill.active { color: var(--crit); } .status-pill.ended { color: var(--muted); }

/* ---------- login ---------- */
.login-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--in) 20%, transparent), transparent),
              radial-gradient(900px 500px at 110% 110%, color-mix(in srgb, var(--out) 16%, transparent), transparent), var(--bg); }
.login-card { width: min(380px, 100%); display: grid; gap: 14px; }
.login-card .brand { justify-content: center; font-size: 18px; margin-bottom: 6px; }
.login-card input { width: 100%; padding: 10px 12px; }
.login-card .switch input { width: 36px; padding: 0; flex: none; }
.error { color: var(--crit); font-size: 13px; min-height: 18px; }

/* ---------- toast / modal ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50; }
.toast { background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--info); border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow); max-width: 380px; }
.toast.error { border-left-color: var(--crit); } .toast.ok { border-left-color: var(--ok); }
dialog { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); padding: 20px; width: min(420px, 92vw); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h3 { margin: 0 0 12px; }
dialog form { display: grid; gap: 10px; }
dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.menu { position: absolute; right: 20px; top: 56px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: var(--shadow); min-width: 220px; z-index: 30; }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.menu button:hover { background: var(--surface-2); }
.menu .who { padding: 8px 10px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.theme-dots { display: flex; gap: 6px; padding: 6px 10px; }
.theme-dots button { width: 22px; height: 22px; border-radius: 50%; padding: 0; border: 2px solid var(--border); }
.theme-dots button[aria-pressed="true"] { border-color: var(--text); }

/* ---------- hosts / alertas / ferramentas ---------- */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-right: 4px; vertical-align: middle; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.crit { background: var(--crit); }
.zsev { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; color: #fff; background: #97aab3; white-space: nowrap; }
.zsev.s1 { background: #7499ff; } .zsev.s2 { background: #d9a400; } .zsev.s3 { background: #ff8a3d; }
.zsev.s4 { background: #e45959; } .zsev.s5 { background: #b3132b; }
.alerts li.alert-row { grid-template-columns: auto 1fr auto; border-left: 3px solid transparent; padding-left: 10px; }
.alert-row.s4, .alert-row.s5 { border-left-color: var(--crit); } .alert-row.s3 { border-left-color: var(--out); } .alert-row.s2 { border-left-color: var(--warn); }
.run { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.run-head { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: var(--surface-2); }
.run.failed .run-head { box-shadow: inset 3px 0 0 var(--crit); }
pre.output { margin: 0; padding: 12px; max-height: 420px; overflow: auto; font: 12.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-word; }

textarea { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font: 12.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; resize: vertical; width: 100%; }
.menu-link { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.menu-link:hover { background: var(--surface-2); }
#toolLinks { border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 4px; }
.btn.danger-fill { background: var(--crit); color: #fff; border-color: transparent; }
.toolbar { flex-wrap: wrap; }

.fin-warn { border-left: 4px solid var(--warn); margin-bottom: 16px; }
.fin-warn a { margin-left: 8px; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; font-weight: 600; }

dialog.wide { width: min(720px, 94vw); }
dialog fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; }
dialog fieldset legend { color: var(--muted); font-size: 12px; font-weight: 650; padding: 0 6px; }
dialog code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }

/* ---------- Sniffnet: nomes, blacklist, modo TV ---------- */
.ptr { color: var(--muted); font-size: 11.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptr:empty { display: none; }
.ptr.block { display: block; }
.threat { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
  color: #fff; background: var(--crit); }
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { border-color: var(--crit); }
body.mini .topbar, body.mini footer, body.mini .suspended { display: none; }
  border-radius: 14px; padding: 12px 16px; }

.drop { display: grid; gap: 4px; place-items: center; text-align: center; padding: 18px; border: 2px dashed var(--border);
  border-radius: 12px; cursor: pointer; color: var(--text); }
.drop:hover, .drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.progress { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .3s; }

footer { text-align: center; color: var(--faint); font-size: 12px; padding: 18px; }

@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr auto; padding: 10px 12px; }
  .tabs { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .brand small { display: none; }
  main { padding: 12px; }
  .seg.window { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.bgp-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 14px; line-height: 2; }
/* Hosts: painel de trafego por porta, aberto abaixo da linha */
.traffic-row > td { background: var(--surface-2); padding: 14px 16px; }
.traffic-panel { display: grid; gap: 12px; }
.traf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.traf-head b { margin-right: auto; }
.traf-graph { min-height: 120px; display: flex; align-items: center; justify-content: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px; overflow-x: auto; }
.traf-graph img { display: block; max-width: 100%; height: auto; border-radius: 6px; background: #fff; }
table.ports tr[data-port] { cursor: pointer; }
table.ports tr[data-port]:hover td, table.ports tr.sel td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
table.ports tr[data-port]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.usage { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.usage span { display: block; height: 100%; background: var(--accent); }
.traf-info { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: flex-end; padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; }
.traf-info > div { display: grid; gap: 2px; }
.traf-info b { font-size: 15px; }
.traf-info .traf-dl { margin-left: auto; display: flex; gap: 8px; }
.traf-cap { margin: 4px 0 -4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
pre.code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 6px 0 12px;
  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; word-break: break-all; max-height: 420px; overflow: auto; }
/* Integracoes: noc8chat */
.chat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.chat-dest { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chat-dest input { flex: 1 1 220px; }
.grp-list { display: grid; gap: 6px; margin-top: 8px; max-height: 240px; overflow: auto; }
.grp-list .grp { display: grid; text-align: left; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; }
.grp-list .grp:hover, .grp-list .grp:focus-visible { border-color: var(--accent); }
.chat-adv { margin-top: 12px; }
.chat-adv summary { cursor: pointer; color: var(--muted); }
.mt-chart { height: 140px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.mt-chart svg { width: 100%; height: 100%; display: block; }
.cat-list { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* Modo TV: carrossel */
.tv-icmp img { max-width: 100%; max-height: 30vh; background: #fff; border-radius: 6px; }
.tv-cfg-list { display: grid; gap: 6px; padding-left: 22px; margin: 6px 0 12px; }
.tv-cfg-list li { display: flex; gap: 10px; align-items: center; }
.tv-cfg-btns { margin-left: auto; display: flex; gap: 4px; }
.tv-if-pick { display: grid; gap: 4px; max-height: 260px; overflow: auto; margin: 8px 0; }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-list li { display: flex; gap: 8px; align-items: center; min-width: 0; }
.mini-list .num { margin-left: auto; font-variant-numeric: tabular-nums; }
/* ---------- Dashboard personalizavel ---------- */
.dash { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.w-2 { grid-column: span 2; } .w-3 { grid-column: span 3; } .w-4 { grid-column: span 4; } .w-6 { grid-column: span 6; }
@media (max-width: 1100px) { .w-2, .w-3, .w-4 { grid-column: span 3; } }
@media (max-width: 760px) { .dash > * { grid-column: span 6; } }
.kpis-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.kpi-pro { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.kpi-pro .value { font-size: 26px; letter-spacing: -.01em; }
.kpi-spark { margin: 8px -4px 0; height: 34px; }
.kpi-delta { margin-top: 6px; font-size: 12px; }
.spark { width: 100%; height: 34px; display: block; }
.spark-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-in .spark-line, .spark-in .spark-dot { stroke: var(--in); fill: var(--in); } .spark-in .spark-line { fill: none; }
.spark-out .spark-line, .spark-out .spark-dot { stroke: var(--out); fill: var(--out); } .spark-out .spark-line { fill: none; }
.spark-acc .spark-line, .spark-acc .spark-dot { stroke: var(--accent); fill: var(--accent); } .spark-acc .spark-line { fill: none; }
.spark-in .s0 { stop-color: var(--in); stop-opacity: .35; } .spark-in .s1 { stop-color: var(--in); stop-opacity: 0; }
.spark-out .s0 { stop-color: var(--out); stop-opacity: .35; } .spark-out .s1 { stop-color: var(--out); stop-opacity: 0; }
.spark-acc .s0 { stop-color: var(--accent); stop-opacity: .3; } .spark-acc .s1 { stop-color: var(--accent); stop-opacity: 0; }
.delta { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta.good { color: var(--ok); } .delta.bad { color: var(--crit); } .delta.flat { color: var(--muted); }
.delta .hint { font-weight: 400; }
.chip { font: inherit; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--muted); cursor: pointer; text-transform: none; letter-spacing: 0; }
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.chart-pro { height: 340px; }
.chart .g-in.s0 { stop-color: var(--in); stop-opacity: .42; } .chart .g-in.s1 { stop-color: var(--in); stop-opacity: .02; }
.chart .g-out.s0 { stop-color: var(--out); stop-opacity: .34; } .chart .g-out.s1 { stop-color: var(--out); stop-opacity: .02; }
.chart .line-in, .chart .line-out { stroke-width: 2.2; stroke-linejoin: round; }
.chart .line-prev { fill: none; stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .55; }
.chart .line-prev-in { stroke: var(--in); } .chart .line-prev-out { stroke: var(--out); }
.chart .ref { stroke-width: 1; stroke-dasharray: 2 4; }
.chart .ref-avg { stroke: var(--muted); fill: var(--muted); } .chart .ref-p95 { stroke: var(--warn); fill: var(--warn); }
.chart .ref-label { font-size: 11px; stroke: none; paint-order: stroke; }
.chart .peak-dot { fill: var(--bg); stroke: var(--in); stroke-width: 2.5; }
.chart .peak-label { fill: var(--text); font-size: 11.5px; font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.tooltip .up { color: var(--ok); } .tooltip .down { color: var(--crit); }
.chart-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
/* evolucao diaria */
.evo-head { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 8px; }
.evo-head > div { display: grid; gap: 2px; } .evo-head b { font-size: 20px; }
.evo-chart { position: relative; height: 170px; }
.evo-chart svg { width: 100%; height: 145px; display: block; }
.evo-base { stroke: var(--border); stroke-width: .4; vector-effect: non-scaling-stroke; }
.evo-in { fill: var(--in); } .evo-out { fill: var(--out); } .partial { opacity: .45; }
.evo-labels { display: flex; } .evo-labels span { flex: 1; text-align: center; font-size: 11px; color: var(--faint); }
.evo-table { margin-top: 10px; max-height: 220px; }
/* mapa de calor */
.heat { display: grid; gap: 3px; overflow-x: auto; }
.heat-row { display: grid; grid-template-columns: 56px repeat(24, minmax(14px, 1fr)); gap: 3px; align-items: center; }
.heat-hours span { font-size: 10px; color: var(--faint); text-align: left; }
.heat-day { font-size: 12px; color: var(--muted); }
.heat-cell { height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--in) var(--lvl), var(--surface-2)); }
.heat-legend { display: flex; align-items: center; gap: 4px; margin-top: 6px; } .heat-legend .heat-cell { width: 18px; height: 12px; }
/* widgets operacionais */
.ops-big { display: grid; gap: 2px; margin-bottom: 6px; } .ops-big b { font-size: 34px; line-height: 1.1; }
.ops-sev { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ops-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 8px; }
.ops-grid > div { display: grid; } .ops-grid b { font-size: 28px; } .crit-t { color: var(--crit); }
.ops-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-cfg-list li.off { opacity: .55; }
.chart .peak-dot.out { stroke: var(--out); }
/* ---------- Provedores (redesenho) ---------- */
.prov-warn { margin: 0 0 14px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, var(--surface)); border-radius: 10px; font-size: 13px; }
.brand-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 1px; }
.spark-brand .spark-line { stroke: var(--c); fill: none; } .spark-brand .spark-dot { fill: var(--c); stroke: var(--c); }
.spark-brand .s0 { stop-color: var(--c); stop-opacity: .32; } .spark-brand .s1 { stop-color: var(--c); stop-opacity: 0; }
.chart .stack-area { fill: color-mix(in srgb, var(--c) 55%, transparent); stroke: none; }
.chart .stack-line { fill: none; stroke: var(--c); stroke-width: 1.4; stroke-linejoin: round; }
.prov-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.legend-chip { display: inline-flex; align-items: center; gap: 6px; }
.legend-chip[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.donut-wrap { display: grid; justify-items: center; gap: 12px; }
.donut { width: min(220px, 100%); height: auto; }
.donut-track { fill: none; stroke: var(--surface-2); stroke-width: 26; }
.donut-big { fill: var(--text); font-size: 26px; font-weight: 700; } .donut-small { fill: var(--muted); font-size: 12px; }
.donut-legend { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; } .donut-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.prov-table { display: grid; }
.prov-head, .prov-row { display: grid; grid-template-columns: 34px minmax(170px, 1.4fr) 150px 110px 110px minmax(140px, 1fr) 90px;
  gap: 12px; align-items: center; padding: 10px 12px; }
.prov-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--border); }
.prov-row { border-bottom: 1px solid var(--border); cursor: pointer; border-left: 3px solid transparent; border-radius: 0; background: none;
  transition: background .15s; }
.prov-row:hover, .prov-row.open { background: color-mix(in srgb, var(--c) 9%, transparent); border-left-color: var(--c); }
.prov-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.prov-row .rank { color: var(--faint); font-weight: 700; font-variant-numeric: tabular-nums; }
.pname-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pname-wrap > span:last-child { display: grid; min-width: 0; }
.prov-row .pname { font-weight: 700; }
.brand-badge { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 12px;
  color: #fff; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); box-shadow: 0 2px 8px color-mix(in srgb, var(--c) 35%, transparent); }
.prov-row .spark { height: 30px; }
.share { display: flex; align-items: center; gap: 8px; }
.share-bar { flex: 1; height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.share-bar span { display: block; height: 100%; background: var(--c); border-radius: 4px; }
.share-n { min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.prov-table .prov-panel { margin: 4px 0 10px; }
@media (max-width: 1100px) {
  .prov-head { display: none; }
  .prov-row { grid-template-columns: 30px 1fr auto; grid-template-areas: "r n d" "s s s"; }
  .prov-row .rank { grid-area: r; } .prov-row .pname-wrap { grid-area: n; } .prov-row > .num:last-child { grid-area: d; }
  .prov-row .share { grid-area: s; } .prov-row .spark-brand, .prov-row > .num:nth-of-type(1), .prov-row > .num:nth-of-type(2) { display: none; }
}
/* ---------- Hosts (redesenho) ---------- */
.host-top { display: grid; grid-template-columns: minmax(260px, 1.3fr) repeat(4, minmax(150px, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .host-top { grid-template-columns: repeat(2, 1fr); } .host-ring { grid-column: 1 / -1; } }
.host-ring { display: flex; align-items: center; gap: 18px; }
.ring { width: 118px; height: 118px; flex: none; }
.ring-track { fill: none; stroke: var(--surface-2); stroke-width: 14; }
.ring-ok { fill: var(--ok); } .ring-bad { fill: var(--crit); }
.ring-big { fill: var(--text); font-size: 22px; font-weight: 800; } .ring-small { fill: var(--muted); font-size: 10.5px; }
.ring-side { display: grid; gap: 4px; } .ring-side b { font-size: 22px; }
.ok-tag { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.crit-tag { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--border)); }
button.host-kpi { text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.host-kpi:hover { border-color: var(--accent); }
.host-kpi.ping { cursor: default; } .host-kpi.ping:hover { border-color: var(--border); }
.host-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 14px; }
.search-box { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); }
.search-box input { border: 0; background: transparent; flex: 1; padding: 9px 0; color: var(--text); outline: none; }
.search-box:focus-within { border-color: var(--accent); }
.field-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.field-inline select { padding: 7px 8px; }
.seg .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--surface-2);
  font-size: 11px; color: var(--muted); }
.host-table td { vertical-align: middle; }
.host-row td:first-child { border-left: 3px solid transparent; }
.host-row.st-down td:first-child { border-left-color: var(--crit); }
.host-row.st-problem td:first-child { border-left-color: var(--warn); }
.host-row.st-ok td:first-child { border-left-color: color-mix(in srgb, var(--ok) 70%, transparent); }
.host-name { display: grid; gap: 2px; min-width: 0; } .host-name b { font-size: 14px; }
.host-model { display: flex; align-items: center; gap: 8px; min-width: 0; }
.host-model > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-badge { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.state-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface-2); }
.state-pill.ok { color: var(--ok); } .state-pill.warn { color: var(--warn); } .state-pill.crit { color: var(--crit); } .state-pill.info { color: var(--info); }
.ping { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.ping-bar { width: 46px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.ping-bar span { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.ping.ok .ping-bar span { background: var(--ok); } .ping.warn .ping-bar span { background: var(--warn); } .ping.crit .ping-bar span { background: var(--crit); }
.host-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.host-card { position: relative; display: grid; gap: 10px; padding: 14px 16px 14px 18px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); overflow: hidden; transition: border-color .15s, transform .15s; }
.host-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--faint); }
.host-card.st-ok::before { background: var(--ok); } .host-card.st-problem::before { background: var(--warn); }
.host-card.st-down::before { background: var(--crit); } .host-card.st-maint::before { background: var(--info); }
.host-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-1px); }
.hc-head { display: flex; align-items: center; gap: 10px; } .hc-head .zsev { margin-left: auto; }
.hc-metrics { display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hc-metrics > div { display: grid; gap: 4px; align-content: start; }
.hc-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hc-panel { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--surface-2); }
button.host-kpi { align-items: stretch; justify-content: flex-start; }
.ping { white-space: nowrap; }
.host-card .ping-bar { width: 32px; }
/* Ferramentas */
.tool-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-chip { display: inline-grid; text-align: left; padding: 6px 12px; border-radius: 10px; font-size: 13px; color: var(--text); }
.tool-chip .hint { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.tool-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
/* Looking Glass publico */
.lg-public { max-width: 980px; margin: 0 auto; padding: 32px 16px; }
.lg-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .lg-head h1 { margin: 0; }
.lg-head .brand-img { width: 46px; height: 46px; }
.lg-public pre.code { max-height: 60vh; }
.ch-grid { align-items: start; }
.ch-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.ch-card h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
/* ---------- Analise (prefixos / interfaces) ---------- */
.an-table tr.clickable { cursor: pointer; }
.an-table tr.clickable:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.share-bar.split { display: flex; }
.share-bar.split span { border-radius: 0; }
.share-bar.split .bar-in { background: var(--in); } .share-bar.split .bar-out { background: var(--out); }
.tag.warn-tag { color: var(--warn, #d97706); border-color: currentColor; }
.page-head .toolbar { flex-wrap: wrap; }
/* ---------- Modo TV (parede do NOC) ---------- */
body.mini main { max-width: none; padding: clamp(10px, 1.2vw, 28px); min-height: 100vh; display: flex; flex-direction: column;
  background: radial-gradient(1200px 500px at 10% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--bg); }
body.mini.tv-idle, body.mini.tv-idle * { cursor: none !important; }
.tv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(12px, 1.6vw, 32px); }
.tv-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tv-brand img { width: clamp(34px, 2.6vw, 56px); height: clamp(34px, 2.6vw, 56px); object-fit: contain; flex: none; }
.tv-titles { display: grid; min-width: 0; }
.tv-titles b { font-size: clamp(18px, 1.55vw, 36px); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.tv-titles span { color: var(--muted); font-size: clamp(11px, .8vw, 17px); text-transform: uppercase; letter-spacing: .08em; }
.tv-status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; font-weight: 700;
  font-size: clamp(12px, .9vw, 19px); text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.tv-status.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.tv-status.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.tv-status.crit { color: #fff; border-color: var(--crit); background: color-mix(in srgb, var(--crit) 70%, var(--surface)); animation: tvBlink 1.6s ease-in-out infinite; }
.tv-pulse { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: tvPulse 1.8s infinite; }
@keyframes tvPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes tvBlink { 50% { background: color-mix(in srgb, var(--crit) 40%, var(--surface)); } }
.tv-clock { display: grid; justify-items: end; line-height: 1.05; }
.tv-clock b { font-size: clamp(22px, 2vw, 46px); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tv-clock span { color: var(--muted); font-size: clamp(11px, .8vw, 17px); }
body.mini .tv-progress { height: 3px; margin: clamp(8px, .8vw, 16px) 0 clamp(10px, 1vw, 20px); background: var(--border); border-radius: 2px; overflow: hidden; }
body.mini .tv-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #fff)); transition: width .25s linear; }
body.mini[data-tv-state="crit"] .tv-progress span { background: var(--crit); }
.tv-screen { flex: 1; min-height: 0; }
.tv-enter { animation: tvIn .45s ease-out; display: grid; gap: clamp(10px, 1vw, 22px); }
@keyframes tvIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tv-foot { display: flex; align-items: center; gap: 16px; margin-top: clamp(10px, 1vw, 18px); min-height: 34px; }
.tv-foot .tv-dots { display: flex; gap: 7px; flex-wrap: wrap; }
.tv-foot .tv-dot { width: 26px; height: 6px; border-radius: 3px; border: 0; padding: 0; background: var(--border); cursor: pointer; transition: background .2s, width .2s; }
.tv-foot .tv-dot.on { background: var(--accent); width: 44px; }
.tv-next { color: var(--faint); font-size: clamp(11px, .75vw, 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tv-foot .tv-ctrl { margin-left: auto; display: flex; gap: 6px; transition: opacity .4s; }
body.tv-idle .tv-ctrl { opacity: 0; }
/* indicadores */
.tv-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1vw, 22px); }
.tv-kpis.tv-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tv-kpi { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, var(--surface)), var(--surface));
  border: 1px solid var(--border); border-radius: 16px; padding: clamp(12px, 1vw, 22px) clamp(14px, 1.1vw, 24px); box-shadow: var(--shadow); --k: var(--faint); min-width: 0; }
.tv-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--k); }
.tv-kpi.in { --k: var(--in); } .tv-kpi.out { --k: var(--out); } .tv-kpi.ok { --k: var(--ok); } .tv-kpi.warn { --k: var(--warn); }
.tv-kpi.crit { --k: var(--crit); border-color: color-mix(in srgb, var(--crit) 55%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--crit) 16%, var(--surface)), var(--surface)); }
.tv-kpi.crit .tv-kpi-v, .tv-kpi.warn .tv-kpi-v { color: var(--k); }
.tv-kpi-l { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: clamp(11px, .8vw, 17px); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.tv-kpi-v { font-size: clamp(26px, 2.6vw, 64px); font-weight: 800; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-kpi-v small { font-size: .45em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.tv-kpi-v.tv-kpi-txt { font-size: clamp(18px, 1.5vw, 36px); padding: .3em 0; }
.tv-kpi-s { color: var(--faint); font-size: clamp(11px, .75vw, 16px); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-kpi-spark { margin: 8px -4px -6px; } .tv-kpi-spark .spark { height: clamp(28px, 2.6vw, 56px); }
i.sw-in, i.sw-out { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--in); flex: none; }
i.sw-out { background: var(--out); }
/* paineis */
.tv-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: clamp(12px, 1vw, 22px); box-shadow: var(--shadow); min-width: 0; }
.tv-panel-h { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; min-width: 0; }
.tv-panel-h h2 { margin: 0; font-size: clamp(12px, .9vw, 19px); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-panel-x { margin-left: auto; color: var(--faint); font-size: clamp(11px, .75vw, 16px); white-space: nowrap; }
.tv-panel-x.error { color: var(--crit); }
.tv-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: clamp(11px, .75vw, 16px); white-space: nowrap; }
.tv-legend i.sw-out { margin-left: 10px; }
body.mini .tv-chart { height: 34vh; }
body.mini .tv-chart-xl { height: 66vh; }
body.mini .tv-chart .axis { font-size: clamp(11px, .7vw, 15px); }
body.mini .tv-chart .ref-label, body.mini .tv-chart .peak-label { font-size: clamp(11px, .75vw, 16px); }
.tv-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 22px); }
.tv-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1vw, 22px); }
.tv-rank, .tv-alist, .tv-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, .55vw, 12px); font-size: clamp(12px, .85vw, 18px); }
.tv-rank li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.tv-rank-n { width: 1.7em; height: 1.7em; border-radius: 7px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: .85em; }
.tv-rank-b { min-width: 0; display: grid; gap: 4px; }
.tv-rank-t { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.tv-rank-t .ptr { overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.tv-rank-bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.tv-rank-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--in))); }
.tv-rank-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv-alist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); }
.tv-alist li.s4, .tv-alist li.s5 { background: color-mix(in srgb, var(--crit) 14%, var(--surface-2)); }
.tv-alist-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-alist-a { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv-alist li.tv-alist-ok { display: block; background: none; padding: 0; }
.tv-empty { display: grid; justify-items: center; gap: 6px; padding: clamp(14px, 2vw, 48px) 10px; text-align: center; color: var(--muted); }
.tv-empty svg { width: clamp(40px, 3.6vw, 84px); height: auto; fill: color-mix(in srgb, var(--ok) 14%, transparent); stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tv-empty b { color: var(--text); font-size: clamp(15px, 1.2vw, 28px); }
/* alertas */
.tv-alert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(320px, 24vw, 560px)), 1fr)); gap: clamp(10px, 1vw, 20px); align-content: start; }
.tv-alert-grid > .tv-empty { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; min-height: 40vh; align-content: center; }
.tv-alert { --k: #97aab3; background: var(--surface); border: 1px solid var(--border); border-left: 6px solid var(--k); border-radius: 14px; padding: clamp(12px, 1vw, 20px); display: grid; gap: 6px; box-shadow: var(--shadow); min-width: 0; }
.tv-alert.s1 { --k: #7499ff; } .tv-alert.s2 { --k: #d9a400; } .tv-alert.s3 { --k: #ff8a3d; } .tv-alert.s4 { --k: #e45959; } .tv-alert.s5 { --k: #b3132b; }
.tv-alert.s4, .tv-alert.s5 { background: linear-gradient(90deg, color-mix(in srgb, var(--k) 14%, var(--surface)), var(--surface)); }
.tv-alert-top { display: flex; align-items: center; gap: 10px; font-size: clamp(11px, .75vw, 16px); }
.tv-alert-src { color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.tv-alert-age { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv-alert-title { font-size: clamp(15px, 1.15vw, 26px); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.tv-alert-host { color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: clamp(12px, .85vw, 18px); }
/* DDoS */
.tv-hero { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 26px); padding: clamp(14px, 1.3vw, 28px) clamp(16px, 1.6vw, 32px); border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.tv-hero svg { width: clamp(40px, 3.4vw, 76px); flex: none; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tv-hero b { display: block; font-size: clamp(20px, 1.8vw, 42px); letter-spacing: -.01em; }
.tv-hero span { color: var(--muted); font-size: clamp(12px, .9vw, 20px); }
.tv-hero.ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 13%, var(--surface)), var(--surface)); }
.tv-hero.ok svg { stroke: var(--ok); fill: color-mix(in srgb, var(--ok) 12%, transparent); } .tv-hero.ok b { color: var(--ok); }
.tv-hero.crit { border-color: var(--crit); background: linear-gradient(90deg, color-mix(in srgb, var(--crit) 30%, var(--surface)), var(--surface)); animation: tvGlow 1.6s ease-in-out infinite; }
.tv-hero.crit svg { stroke: var(--crit); fill: color-mix(in srgb, var(--crit) 18%, transparent); } .tv-hero.crit b { color: var(--crit); }
@keyframes tvGlow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--crit) 35%, transparent); } }
.tv-rows li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.tv-rows-m { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tv-rows-v { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv-rows li.tv-rows-empty { display: block; background: none; padding: 0; }
.tv-rows li.tv-rows-none { color: var(--faint); justify-content: center; padding: 18px; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8em; font-weight: 700; background: var(--border); color: var(--muted); white-space: nowrap; }
.pill.crit { background: color-mix(in srgb, var(--crit) 22%, transparent); color: var(--crit); }
/* interface em tempo real */
.tv-if-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 21vw, 460px); gap: clamp(10px, 1vw, 22px); }
.tv-if-dev { color: var(--faint); } .tv-if-alias { color: var(--accent); text-transform: none; letter-spacing: 0; font-weight: 600; }
.tv-side { display: grid; gap: clamp(10px, 1vw, 22px); align-content: start; }
.tv-gauge-card { display: grid; justify-items: center; }
.tv-gauge-card > div:first-child { width: 100%; display: flex; justify-content: center; }
.tv-gauge { width: 100%; max-width: 360px; }
.tv-gauge .g-track, .tv-gauge .g-val { fill: none; stroke-width: 14; stroke-linecap: round; }
.tv-gauge .g-track { stroke: var(--surface-2); }
.tv-gauge .g-val { stroke: var(--faint); transition: stroke-dasharray .6s ease; }
.tv-gauge.ok .g-val { stroke: var(--ok); } .tv-gauge.warn .g-val { stroke: var(--warn); } .tv-gauge.crit .g-val { stroke: var(--crit); }
.tv-gauge .g-tick { fill: var(--faint); font-size: 10px; }
.tv-gauge-v { display: grid; justify-items: center; margin-top: -22%; }
.tv-gauge-v b { font-size: clamp(28px, 2.6vw, 60px); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tv-gauge-v span { color: var(--muted); font-size: clamp(11px, .75vw, 16px); }
/* host */
body.mini .tv-host-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(10px, 1vw, 22px); }
body.mini .tv-mini-if .chart { height: 24vh; }
.tv-if-now { font-variant-numeric: tabular-nums; font-size: clamp(12px, .9vw, 19px); font-weight: 700; }
.c-in { color: var(--in); } .c-out { color: var(--out); }
.tv-use { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-bottom: 8px; }
.tv-use span { display: block; height: 100%; width: 0; background: var(--ok); transition: width .5s; }
.tv-use span.warn { background: var(--warn); } .tv-use span.crit { background: var(--crit); }
body.mini .tv-icmp { min-height: 24vh; display: flex; align-items: center; justify-content: center; }
@media (max-width: 1100px) {
  .tv-kpis, .tv-kpis.tv-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tv-cols3, .tv-cols2, .tv-if-layout { grid-template-columns: 1fr; }
  .tv-head { grid-template-columns: minmax(0, 1fr) auto; } .tv-status { grid-column: 1 / -1; justify-self: start; grid-row: 2; }
  .tv-foot { flex-wrap: wrap; } .tv-foot .tv-ctrl { margin-left: 0; flex-wrap: wrap; }
}
/* ---------- DDoS: Flowspec cirurgico, sincronia com o BGP, emergencia ---------- */
.fs-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.fs-preview pre.code { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; min-height: 2.6em; }
.hint.error { color: var(--crit); }
.bgp-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.bgp-pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.bgp-pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.bgp-pill.crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 50%, transparent); background: color-mix(in srgb, var(--crit) 12%, transparent); }
.sync-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.sync-k { --k: var(--border); display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border-left: 3px solid var(--k); min-width: 0; }
.sync-k.ok { --k: var(--ok); } .sync-k.warn { --k: var(--warn); } .sync-k.crit { --k: var(--crit); }
.sync-k small { color: var(--muted); font-size: 12px; }
.sync-k b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sync-k span { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-errs { grid-column: 1 / -1; display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--crit) 8%, var(--surface-2)); }
.sync-errs code { display: block; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.emergency { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--crit) 60%, var(--border)); background: color-mix(in srgb, var(--crit) 6%, transparent); }
.emergency p { margin: 2px 0 0; }
.emergency .btn { margin-left: auto; white-space: nowrap; }
.fs-acts { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 4px; margin: 0; }
.fs-acts legend { color: var(--muted); font-size: 12.5px; padding: 0 6px; }
.fs-acts #actChecks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 760px) { .emergency { flex-direction: column; align-items: stretch; } .emergency .btn { margin-left: 0; } }
/* ---------- Ferramentas: console SSH seguro ---------- */
#toolPane { margin-top: 14px; }
.con-head { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.con-head .field { min-width: 280px; }
.con-safe { margin-left: auto; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.con-short { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.term { background: #05080c; color: #d7e3df; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; height: 52vh; min-height: 280px;
  overflow: auto; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.8px; line-height: 1.45; }
.term:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.term-hello { color: #7f9a92; margin-bottom: 10px; font-family: inherit; }
.term-hello b { color: #b9d7cd; }
.term-block { margin: 10px 0 14px; }
.term-cmd { color: #e8f3ef; font-weight: 600; }
.term-prompt { color: #3fd39a; font-weight: 700; }
.term-meta { color: #5f7a72; font-size: 11.5px; margin: 2px 0 4px; }
.term pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; color: #c9d6d2; }
.term-block.failed pre, .term-err { color: #ff8b95; }
.term-err { margin-top: 8px; }
.term-input { display: flex; align-items: center; gap: 8px; margin-top: 8px; background: #05080c; border: 1px solid var(--border); border-radius: 10px; padding: 6px 6px 6px 12px; }
.term-input input { flex: 1; min-width: 0; background: transparent; border: 0; color: #e8f3ef; font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; outline: none; }
.term-input .term-prompt { font-family: ui-monospace, Consolas, monospace; font-size: 13px; white-space: nowrap; }
.con-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 10px; }
.con-tools .field { flex: 1; min-width: 220px; }
.con-hist { margin-top: 12px; }
.con-hist summary { cursor: pointer; color: var(--muted); }
.con-hist .error { color: var(--crit); font-size: 12px; }
/* ---------- Ferramentas: CGNAT ---------- */
.cg-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); min-width: 0; }
.cg-card h3 { margin: 0; font-size: 15px; }
.cg-card p.error, #cgPrev .error { color: var(--crit); }
.cg-hit { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); display: grid; gap: 6px; }
.cg-cfg { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.cg-cfg summary { cursor: pointer; font-weight: 600; }
.cg-cfg form { margin-top: 10px; }
.cg-cfg textarea { font-family: ui-monospace, Consolas, monospace; }
/* ---------- DDoS: protecao do proprio roteador ---------- */
.prot-grid textarea { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
/* ---------- Protecao DDoS: central de mitigacao ---------- */
.btn.danger-outline { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 55%, var(--border)); background: transparent; }
.btn.danger-outline:hover { background: color-mix(in srgb, var(--crit) 12%, transparent); }
.dd-hero { --k: var(--ok); position: relative; display: grid; grid-template-columns: minmax(260px, auto) 1fr auto; align-items: center; gap: 18px;
  padding: 16px 20px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--k) 35%, var(--border)); overflow: hidden;
  background: linear-gradient(100deg, color-mix(in srgb, var(--k) 16%, var(--surface)) 0%, var(--surface) 55%); box-shadow: var(--shadow); }
.dd-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--k); }
.dd-hero.crit { --k: var(--crit); animation: ddGlow 1.8s ease-in-out infinite; }
@keyframes ddGlow { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 30%, transparent); } }
.dd-state { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dd-state svg { width: 44px; height: 44px; flex: none; fill: color-mix(in srgb, var(--k) 14%, transparent); stroke: var(--k); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dd-state b { display: block; font-size: 20px; letter-spacing: -.01em; color: var(--k); }
.dd-state span { color: var(--muted); font-size: 13px; }
.dd-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dd-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.dd-link.ok { color: var(--text); } .dd-link.bad { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 35%, var(--border)); }
.dd-link .dot { margin: 0; }
.dd-auto { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 600; white-space: nowrap; }
.dd-hero.auto-on .dd-auto { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--accent); }
.dd-kpis { margin: 14px 0; }
.dd-kpi { --k: var(--border); display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--k); min-width: 0; }
.dd-kpi.ok { --k: var(--ok); } .dd-kpi.warn { --k: var(--warn); } .dd-kpi.crit { --k: var(--crit); } .dd-kpi.info { --k: var(--accent); }
.dd-kpi small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.dd-kpi b { font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dd-kpi.crit b { color: var(--crit); }
.dd-kpi span { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-tabs { margin-bottom: 14px; }
.dd-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.dd-table td:nth-child(3) { min-width: 180px; }
.dd-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dd-card-h h2 { margin: 0; }
.seg.small button { padding: 3px 9px; font-size: 12px; }
.dd-list { display: grid; gap: 8px; max-height: 560px; overflow: auto; }
.dd-atk { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m n" "a a"; gap: 6px 12px; padding: 10px 12px;
  border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--border); }
.dd-atk.live { border-left-color: var(--crit); background: color-mix(in srgb, var(--crit) 8%, var(--surface-2)); }
.dd-atk-main { grid-area: m; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.dd-vec { color: var(--muted); font-size: 13px; }
.dd-atk-num { grid-area: n; text-align: right; display: grid; }
.dd-atk-num b { font-variant-numeric: tabular-nums; }
.dd-atk-num span { color: var(--faint); font-size: 11.5px; }
.dd-atk-act { grid-area: a; display: flex; gap: 6px; }
.dd-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--border); color: var(--muted); }
.dd-pill.crit { background: color-mix(in srgb, var(--crit) 20%, transparent); color: var(--crit); }
.dd-pill.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.dd-empty { display: grid; justify-items: center; gap: 4px; padding: 30px 10px; text-align: center; color: var(--muted); }
.dd-empty svg { width: 42px; height: 42px; fill: color-mix(in srgb, var(--ok) 12%, transparent); stroke: var(--ok); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dd-empty b { color: var(--text); }
.dd-table td { vertical-align: top; }
.dd-type { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.dd-type.fs { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.dd-type.bh { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--crit); }
.dd-type.det { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.dd-actions { white-space: nowrap; text-align: right; width: 1%; }
/* botoes empilhados: a coluna fica estreita e nada e cortado (Editar / SSH / Retirar) */
.dd-actions .btn { display: block; width: 100%; min-width: 74px; }
.dd-actions .btn + .btn { margin-top: 4px; }
dialog.dd-dialog { width: min(980px, calc(100vw - 32px)); }
.dd-dlg-h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.dd-dlg-h h3 { margin: 0; }
.dd-dlg-h [data-close] { margin-left: auto; }
.dd-warn { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--crit) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--crit) 35%, var(--border)); margin: 0 0 12px; }
@media (max-width: 1100px) {
  .dd-hero { grid-template-columns: 1fr; } .dd-links { justify-content: flex-start; }
  .dd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-grid { grid-template-columns: 1fr; }
}
/* ---------- Integracoes: provedor de IA ---------- */
.ai-prov { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.ai-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); cursor: pointer; }
.ai-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.ai-opt span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-opt input { flex: none; }
#aiForm .form-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* ---------- indicador padrao (kpi) com cor de estado ---------- */
.kpi-pro[class*="tone-"]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--k, var(--border)); }
.kpi-pro.tone-ok { --k: var(--ok); } .kpi-pro.tone-warn { --k: var(--warn); } .kpi-pro.tone-crit { --k: var(--crit); }
.kpi-pro.tone-info { --k: var(--accent); } .kpi-pro.tone-in { --k: var(--in); } .kpi-pro.tone-out { --k: var(--out); }
.kpi-pro.tone-crit .value { color: var(--crit); } .kpi-pro.tone-warn .value { color: var(--warn); }
.kpi-pro .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-pro[data-click] { cursor: pointer; } .kpi-pro[data-click]:hover { border-color: var(--k, var(--accent)); }
/* ---------- Networks ---------- */
.net-filters { padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.net-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 2px; }
.net-chips:empty { display: none; }
.chip-f { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 12.5px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }
.chip-f button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 6px; border-radius: 50%; }
.chip-f button:hover { color: var(--crit); }
.net-ip { display: inline-flex; align-items: center; gap: 4px; }
.own-btn { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--faint); cursor: pointer; opacity: .55; }
.own-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
tr:hover .own-btn, .own-btn:focus-visible { opacity: 1; color: var(--accent); border-color: var(--border); }
/* ---------- Usuarios ---------- */
.us-cell { display: flex; align-items: center; gap: 10px; }
.us-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 12.5px; color: #fff;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); }
.role-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); }
.role-badge.admin { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--border)); }
.role-badge.operador { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.role-badge.visualizador { color: var(--muted); }
.au-act { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 12px; background: var(--surface-2); white-space: nowrap; }
.au-act.bad { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }
.au-det summary { cursor: pointer; color: var(--muted); font-size: 12.5px; max-width: 560px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-det pre.code { max-width: 640px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 11.5px; }
/* ---------- Notificacoes ---------- */
.nt-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; margin-top: 16px; align-items: start; }
.nt-side { display: grid; gap: 16px; }
.nt-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 620px; overflow: auto; }
.nt-ev { --k: var(--border); display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px;
  border-radius: 10px; background: var(--surface-2); border-left: 3px solid var(--k); }
.nt-ev.crit { --k: var(--crit); } .nt-ev.warn { --k: var(--warn); } .nt-ev.info { --k: var(--accent); }
.nt-ev .hint { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.nt-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border);
  color: var(--accent); font-size: 14px; flex: none; }
.nt-empty { display: grid; gap: 4px; padding: 30px 10px; text-align: center; color: var(--muted); }
.nt-empty b { color: var(--text); }
.nt-rules { display: grid; gap: 8px; }
.nt-rule { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.nt-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.nt-kind { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: 13px; }
.nt-kind:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.nt-kind input { flex: none; }
@media (max-width: 1100px) { .nt-grid { grid-template-columns: 1fr; } }
/* ---------- Alertas: gravidade na lateral da linha ---------- */
.events.alerts .alert-row { --k: #97aab3; border-left: 4px solid var(--k); border-radius: 10px; padding-left: 12px; margin-bottom: 6px; background: var(--surface-2); }
.events.alerts .alert-row.s1 { --k: #7499ff; } .events.alerts .alert-row.s2 { --k: #d9a400; } .events.alerts .alert-row.s3 { --k: #ff8a3d; }
.events.alerts .alert-row.s4 { --k: #e45959; } .events.alerts .alert-row.s5 { --k: #b3132b; background: color-mix(in srgb, #b3132b 10%, var(--surface-2)); }
/* ---------- indice fixo de secoes (paginas longas) ---------- */
.sec-nav { position: sticky; top: 72px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin-bottom: 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border); backdrop-filter: blur(6px); box-shadow: var(--shadow); }
.sec-nav a { padding: 6px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; }
.sec-nav a:hover { color: var(--text); background: var(--surface-2); }
.sec-nav a[aria-current] { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
section.sec { scroll-margin-top: 130px; }
/* ---------- Wiki ---------- */
.wk { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.wk-side { position: sticky; top: 84px; display: grid; gap: 10px; max-height: calc(100vh - 110px); overflow: auto; }
.wk-side input { width: 100%; }
.wk-side nav { display: grid; gap: 2px; }
.wk-side a { display: grid; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--text); border-left: 3px solid transparent; }
.wk-side a span { color: var(--faint); font-size: 12px; }
.wk-side a:hover { background: var(--surface-2); }
.wk-side a[aria-current] { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border-left-color: var(--accent); }
.wk-body { display: grid; gap: 16px; }
.wk-art { scroll-margin-top: 90px; line-height: 1.6; }
.wk-art h2 { margin-bottom: 8px; }
.wk-art h3 { margin: 14px 0 6px; font-size: 14.5px; color: var(--accent); }
.wk-art ul, .wk-art ol { padding-left: 20px; margin: 6px 0; display: grid; gap: 4px; }
.wk-art p { margin: 6px 0; }
.wk-art table { margin: 8px 0; }
.wk-art pre.code { white-space: pre; overflow: auto; font-size: 12px; }
.wk-faq dt { font-weight: 700; margin-top: 10px; }
.wk-faq dd { margin: 2px 0 0; color: var(--muted); }
@media (max-width: 900px) { .wk { grid-template-columns: 1fr; } .wk-side { position: static; max-height: none; } }

/* ---------------------------------------------------------------- Operadoras (ASN + communities) */
.op-list { display: grid; gap: 16px; }
.op-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.op-as { font: 700 15px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.op-title { display: flex; flex-direction: column; min-width: 0; }
.op-title h2 { margin: 0; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--text); }
.op-actions { margin-left: auto; }
.op-rms { margin: 0 0 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.op-rms code, .op-table code { background: var(--surface-2); padding: 1px 7px; border-radius: 6px; }
.op-table tr.op-bh td:first-child code { color: var(--crit); font-weight: 700; }
.op-notes { margin: 10px 0 0; white-space: pre-wrap; }
.op-form .op-wide { grid-column: 1 / -1; }
.op-crow { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(170px, 1.2fr) minmax(140px, 2fr) auto; gap: 8px; align-items: center; margin-top: 6px; }
.op-chead { color: var(--muted); font-size: 12px; font-weight: 650; margin-top: 0; }
@media (max-width: 640px) {
  .op-crow { grid-template-columns: 1fr 1fr; }
  .op-chead { display: none; }
  .op-actions { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------- Protecao DDoS: tablet e celular */
.dd-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dd-tabs button { white-space: nowrap; }
@media (max-width: 1100px) {
  .dd-hero .dd-auto { justify-self: start; }
  .dd-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }      /* 5 indicadores em 2 colunas: o ultimo ocupa a linha */
}
/* tablet e notebook pequeno: menu do topo em segunda linha e quebrando, para todas as abas ficarem visiveis */
@media (min-width: 761px) and (max-width: 1280px) {
  .topbar { grid-template-columns: 1fr auto; row-gap: 8px; }
  .tabs { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; justify-content: center; overflow: visible; }
  .tabs > :first-child, .tabs > :last-child { margin: 0; }
}
@media (max-width: 760px) {
  .page-head > .toolbar, .page-head > div:last-child:not(:first-child) { width: 100%; }
  .page-head .toolbar .btn { flex: 1 1 auto; }
  .dd-hero { padding: 14px 14px 14px 18px; gap: 12px; }
  .dd-state b { font-size: 18px; }
  .dd-links { gap: 6px; }
  .dd-hero .dd-auto { justify-self: stretch; text-align: left; white-space: normal; }
  .dd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dd-kpi b { font-size: 20px; }
  .dd-tabs { display: flex; width: 100%; }
  .dd-tabs button { flex: 1 0 auto; }
  .sync-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .sync-grid { grid-template-columns: 1fr; }
  .dd-kpi { padding: 10px 12px; } .dd-kpi b { font-size: 18px; }
}

/* ---------- MANRS (segurança de roteamento) ---------- */
.ok-t { color: var(--ok); }
.m-ok { --m: var(--ok); } .m-warn { --m: var(--warn); } .m-fail { --m: var(--crit); } .m-none { --m: var(--faint); }
.m-ring circle { fill: none; stroke-width: 8; }
.m-ring .m-ring-bg { stroke: var(--border); }
.m-ring .m-ring-val { stroke: var(--m); stroke-linecap: round; transition: stroke-dasharray .6s; }
.m-ring text { fill: var(--text); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.m-cats li { display: grid; grid-template-columns: minmax(120px, 170px) 1fr 64px; gap: 10px; align-items: center; }
.m-cats.compact { gap: 6px; } .m-cats.compact li { grid-template-columns: minmax(92px, 130px) 1fr 52px; font-size: 12.5px; }
.m-cat-n { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-cat-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.m-bar span { display: block; height: 100%; border-radius: 4px; background: var(--m); transition: width .6s; }
.m-trend { font-size: 10px; } .m-trend.Asc { color: var(--ok); } .m-trend.Desc { color: var(--crit); }
.m-asn + .m-asn { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.m-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.m-w { display: flex; gap: 14px; align-items: center; } .m-w .m-cats { flex: 1; min-width: 0; }
.m-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; }
.m-top { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.m-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; margin-top: 16px; }
.m-sub { font-size: 13px; color: var(--muted); margin: 14px 0 8px; font-weight: 600; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow: auto; }
.m-chips code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-size: 12px; }
.m-row-bad td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.m-hist svg { width: 100%; height: 160px; overflow: visible; }
.m-hist polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.m-hist .m-hist-ref { stroke: var(--faint); stroke-dasharray: 4 4; stroke-width: 1; }
.m-hist-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin: 4px 0 10px; }
.m-hist .legend { flex-wrap: wrap; }
@media (max-width: 640px) {
  .m-grid { grid-template-columns: 1fr; }
  .m-cats li { grid-template-columns: 1fr 64px; } .m-cats li .m-bar { grid-column: 1 / -1; grid-row: 2; }
  .m-w { flex-direction: column; align-items: stretch; }
}

/* ---------- Team Cymru Scout (reputação de IP) ---------- */
.scout-btn { border: 0; background: none; cursor: pointer; padding: 0 3px; font-size: 12px; opacity: .55; line-height: 1; vertical-align: middle; }
.scout-btn:hover, .scout-btn:focus-visible { opacity: 1; }
.pill.sc-crit { background: color-mix(in srgb, var(--crit) 22%, transparent); color: var(--crit); }
.pill.sc-warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.pill.sc-ok { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.sc-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.sc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sc-tag { border-left: 3px solid var(--tc, var(--border)); }
.sc-ins { margin: 0 0 6px; padding-left: 18px; display: grid; gap: 6px; }
.sc-ins li.sc-crit { color: var(--crit); } .sc-ins li.sc-warn { color: var(--warn); }
.sc-grid { margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sc-hash { font-size: 11px; word-break: break-all; }
.sc-usage { margin-top: 12px; display: grid; gap: 6px; }
.sc-quick { display: flex; gap: 8px; margin-bottom: 10px; } .sc-quick input { flex: 1; min-width: 0; }

/* ---------- Segurança de roteamento: visão do cliente (nota, cards, plano de ação, relatório) ---------- */
.mh-ok { --g: var(--ok); } .mh-warn { --g: var(--warn); } .mh-fail { --g: var(--crit); } .mh-none { --g: var(--faint); }
.m-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 24px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--g) 14%, var(--surface)), var(--surface) 55%); border-color: color-mix(in srgb, var(--g) 35%, var(--border)); }
.m-grade { width: 104px; height: 104px; border-radius: 26px; display: grid; place-items: center; align-content: center;
  background: color-mix(in srgb, var(--g) 18%, transparent); border: 2px solid var(--g); color: var(--g); }
.m-grade span { font-size: 58px; font-weight: 800; line-height: 1; } .m-grade small { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; opacity: .8; }
.m-grade.small { width: 58px; height: 58px; border-radius: 16px; flex: none; } .m-grade.small span { font-size: 32px; }
.m-hero-org { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 17px; }
.m-hero-frase { font-size: 19px; font-weight: 600; margin: 8px 0 6px; }
.m-hero-ring { display: grid; justify-items: center; gap: 2px; } .m-hero-ring small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.m-pitch { grid-column: 1 / -1; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; }
.m-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.m-card { display: grid; gap: 10px; align-content: start; border-top: 3px solid var(--c); }
.mc-ok { --c: var(--ok); } .mc-warn { --c: var(--warn); } .mc-fail { --c: var(--crit); } .mc-none { --c: var(--faint); }
.m-card-h { display: flex; align-items: center; gap: 8px; } .m-card-h b { flex: 1; }
.m-ico { font-size: 20px; } .m-st { font-size: 11.5px; font-weight: 700; color: var(--c); white-space: nowrap; }
.m-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.m-card-f { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }
.m-plan { margin-top: 16px; } .m-plan h2 { display: flex; gap: 10px; align-items: center; }
.pill.m-pill-ok { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.m-steps { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.m-step { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.m-step::marker { font-weight: 800; color: var(--crit); }
.m-step-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .m-step-h b { font-size: 15px; }
.m-step p { margin: 6px 0; }
.m-howto { margin: 6px 0 8px; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; }
.m-links { display: flex; gap: 8px; flex-wrap: wrap; }
.m-done { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.m-done li { display: flex; gap: 10px; align-items: flex-start; } .m-done li > span { font-weight: 800; width: 16px; }
.m-done p { margin: 2px 0 6px; }
.m-cta { margin-top: 16px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); }
.m-cta h2 { margin: 0 0 4px; } .m-cta p { margin: 0; color: var(--muted); max-width: 760px; }
.m-tech { margin-top: 16px; } .m-tech > summary { cursor: pointer; display: flex; gap: 12px; align-items: baseline; list-style: none; }
.m-tech > summary::-webkit-details-marker { display: none; }
.m-tech > summary h2 { margin: 0; } .m-tech > summary::before { content: "▸"; color: var(--muted); } .m-tech[open] > summary::before { content: "▾"; }
.m-onb { max-width: 760px; margin: 24px auto; text-align: center; padding: 32px 28px; }
.m-onb h2 { font-size: 22px; margin: 12px 0 6px; }
.m-onb-badge { width: 72px; height: 72px; margin: 0 auto; border-radius: 20px; display: grid; place-items: center; font-size: 40px; font-weight: 800;
  color: var(--ok); border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.m-onb-form { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 18px auto 6px; max-width: 420px; }
.m-onb-form input { flex: 1; font-size: 18px; padding: 10px 12px; } .m-onb-as { font-weight: 800; font-size: 18px; color: var(--muted); }
.m-onb-name { min-height: 1.4em; }
.m-onb-list { list-style: none; padding: 0; margin: 16px auto 0; display: inline-grid; gap: 6px; text-align: left; color: var(--muted); }
.m-w-frase { margin: 8px 0 2px; font-weight: 600; font-size: 13.5px; } .m-w-next { margin: 0; font-size: 12.5px; color: var(--muted); }
.print-only { display: none; }
@media (max-width: 720px) {
  .m-hero { grid-template-columns: 1fr; justify-items: start; } .m-hero-ring { justify-self: start; }
  .m-onb-form { flex-wrap: wrap; } .m-onb-form .btn { width: 100%; }
}
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; color: #111 !important; }
  .topbar, footer, #submenu, .no-print, .toast, dialog { display: none !important; }
  .print-only { display: block !important; }
  .card { box-shadow: none !important; break-inside: avoid; background: #fff !important; color: #111 !important; border-color: #ccc !important; }
  .m-hero { background: #fff !important; } .hint, .m-card p { color: #444 !important; }
  .m-report-head { display: flex !important; gap: 16px; align-items: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #111; }
  .m-report-head img { max-height: 48px; max-width: 200px; }
  .m-report-foot { margin-top: 16px; font-size: 11px; color: #555; }
  .m-step { background: #fafafa !important; }
  :root, html { color-scheme: light !important; }
  html, body, #shell, main, #view { background: #fff !important; }
  .m-ring text { fill: #111 !important; } .m-ring .m-ring-bg { stroke: #e5e5e5 !important; }
  .m-pitch { background: #f3f5f4 !important; color: #111 !important; border-color: #ddd !important; }
  .tag { background: #eef0ef !important; color: #333 !important; }
  .m-card b, .m-hero b, .m-hero-frase, .m-step-h b, .m-done b { color: #111 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- varios dashboards: abas e modelos ---------- */
.dash-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 14px; }
.dash-tab { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px;
  padding: 6px 14px; font: inherit; font-size: 13.5px; cursor: pointer; }
.dash-tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.dash-tab[aria-current="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.dash-tab.dash-new { border-style: dashed; color: var(--accent); background: transparent; }
.dash-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.dash-model { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.dash-model:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dash-model input { margin-top: 3px; } .dash-model span { display: grid; gap: 2px; }
.dash-model small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }

/* ---------- Segurança de roteamento v2 (layout profissional) ---------- */
.m2-hero { padding: 26px 28px 22px; display: grid; gap: 22px;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--g) 16%, var(--surface)) 0%, var(--surface) 55%);
  border-color: color-mix(in srgb, var(--g) 30%, var(--border)); }
.m2-hero-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; align-items: center; }
.m2-id { display: grid; gap: 4px; min-width: 0; }
.m2-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g); }
.m2-id h2 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.m2-meta { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.m2-frase { margin: 8px 0 0; font-size: 16px; color: var(--text); max-width: 62ch; }
.m2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--border);
  border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); overflow: hidden; }
.m2-stats > div { padding: 12px 16px; display: grid; gap: 2px; border-left: 1px solid var(--border); }
.m2-stats > div:first-child { border-left: 0; }
.m2-stats dt { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.m2-stats dd { margin: 0; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.m2-stats dd small { font-size: 14px; color: var(--muted); font-weight: 600; }
.m2-stats .is-warn dd { color: var(--warn); } .m2-stats .is-crit dd { color: var(--crit); }
.m2-pitch { margin: 0; display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); }
.m2-pitch b { color: var(--text); }
.m2-pitch svg { width: 20px; height: 20px; flex: none; color: var(--g); }

.m2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 16px; }
.m2-card { display: grid; gap: 12px; align-content: start; padding: 18px; position: relative; overflow: hidden; }
.m2-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); }
.m2-card header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.m2-bigrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.m2-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.m2-ico svg { width: 19px; height: 19px; }
.m2-card h3 { margin: 0; font-size: 14.5px; line-height: 1.25; text-transform: none; letter-spacing: 0; color: var(--text); }
.m2-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.m2-big { font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.mc-none .m2-big { color: var(--faint); }
.m2-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.m2-cmp { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.m2-cmp > div { display: grid; grid-template-columns: 86px minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.m2-cmp b { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.m2-track { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.m2-track i { display: block; height: 100%; border-radius: 3px; }
.m2-track i.you { background: var(--c); } .m2-track i.br { background: var(--faint); }

.m2-plan { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; padding: 0; overflow: hidden; }
.m2-plan-main { padding: 20px 22px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.m2-plan-main h2 { display: flex; gap: 10px; align-items: center; margin: 0; }
.m2-plan-done { padding: 20px 22px; background: color-mix(in srgb, var(--surface-2) 75%, transparent); border-left: 1px solid var(--border); }
.m2-plan-done h3 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.m2-plan-done ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.m2-plan-done li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 13.5px; font-weight: 600; }
.m2-plan-done svg { width: 19px; height: 19px; color: var(--ok); }
.m2-sub { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.m2-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.m2-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }
.m2-step.is-pend { border-color: color-mix(in srgb, var(--crit) 35%, var(--border)); }
.m2-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: color-mix(in srgb, var(--crit) 15%, transparent); color: var(--crit); }
.is-nodata .m2-num { background: transparent; color: var(--faint); }
.is-nodata .m2-num svg { width: 24px; height: 24px; }
.m2-step p { margin: 4px 0 6px; color: var(--muted); font-size: 13px; }
.m2-step-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.m2-step-h b { font-size: 14.5px; }
.m2-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.m2-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none;
  padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 8px; }
.m2-link:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.m2-link svg { width: 13px; height: 13px; }
.m2-allgood { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--border)); }
.m2-allgood svg { width: 24px; height: 24px; color: var(--ok); }
.m2-allgood p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.m2-cta { margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 22px; }
.m2-cta-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.m2-cta-ico svg { width: 26px; height: 26px; }
.m2-cta h2 { margin: 0 0 4px; }
.m2-cta p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 80ch; }
#mMes { min-width: 160px; }

@media (max-width: 900px) {
  .m2-plan { grid-template-columns: 1fr; }
  .m2-plan-done { border-left: 0; border-top: 1px solid var(--border); }
  .m2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m2-stats > div:nth-child(3) { border-left: 0; }
  .m2-stats > div:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .m2-hero-top { grid-template-columns: auto minmax(0, 1fr); }
  .m2-hero-top .m-hero-ring { display: none; }
  .m2-cta { grid-template-columns: 1fr; }
}
@media print {
  .m2-hero, .m2-plan-done, .m2-stats { background: #fff !important; }
  .m2-id h2, .m2-frase, .m2-big, .m2-stats dd, .m2-card h3, .m2-cmp b, .m2-step-h b, .m2-plan-done li { color: #111 !important; }
  .m2-card, .m2-step, .m2-plan { break-inside: avoid; }
}

/* ---------- Segurança de roteamento v3: secoes no estilo do MANRS Observatory ---------- */
.m3-section { margin-top: 22px; display: grid; gap: 12px; }
.m3-head h2 { margin: 0; font-size: 19px; text-transform: none; letter-spacing: 0; color: var(--text); }
.m3-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.m3-info { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1.3px solid currentColor;
  font: italic 700 9px/1 Georgia, serif; color: var(--faint); cursor: help; vertical-align: 1px; margin-left: 4px; }
.m3-ready { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 18px 8px; }
.m3-col { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 4px 12px; text-align: center; border-left: 1px solid var(--border); }
.m3-col:first-child { border-left: 0; }
.m3-col h3 { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.m3-donut { width: 108px; height: 108px; }
.m3-donut circle { fill: none; stroke-width: 9; }
.m3-d-bg { stroke: var(--border); }
.m3-d-val { stroke: var(--c); stroke-linecap: round; transition: stroke-dasharray .6s; }
.m3-d-txt { fill: var(--text); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.m3-d-trend { fill: var(--muted); font-size: 8.5px; }
.m3-col .m3-legend { justify-content: center; }
.m3-br { margin: 0; font-size: 12px; color: var(--muted); }
.m3-br b { color: var(--text); }
.m3-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.m3-legend span { display: inline-flex; align-items: center; gap: 6px; }
.m3-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.m3-c-mc-ok { background: var(--ok); } .m3-c-mc-warn { background: var(--warn); } .m3-c-mc-fail { background: var(--crit); } .m3-c-mc-none { background: var(--faint); }
.m3-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.m3-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.m3-stat h3, .m3-box h3 { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.m3-stat b { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1; }
.m3-stat b small { font-size: 16px; color: var(--muted); }
.m3-stat.is-warn b { color: var(--warn); }
.m3-box { display: grid; gap: 12px; padding: 18px 20px; }
.m3-stack { display: flex; height: 16px; border-radius: 3px; overflow: hidden; background: var(--border); }
.m3-stack span { display: block; height: 100%; }
.m3-blue { background: #4f8ff7; } .m3-green { background: #2fd29b; } .m3-amber { background: #f6c13a; }
.m3-empty { background: var(--border); }
.m3-box .m3-legend { justify-content: center; }
.m3-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); text-align: center; }
.m3-nums b { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.m3-nums small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 1100px) {
  .m3-ready { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .m3-col:nth-child(3) { border-left: 0; }
}
@media (max-width: 700px) {
  .m3-ready { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m3-grid { grid-template-columns: 1fr; }
}
@media print {
  .m3-d-txt, .m3-stat b, .m3-nums b, .m3-head h2 { fill: #111 !important; color: #111 !important; }
  .m3-ready, .m3-box, .m3-stat { break-inside: avoid; background: #fff !important; }
}

.m3-br-note { font-size: 11px; color: var(--faint); }
.m3-d-nd { fill: var(--muted); font-size: 10.5px; font-weight: 600; }

.cg-fora { margin-top: 12px; display: grid; gap: 8px; }
.cg-fora .hint b { color: var(--crit); }

/* ---------- widget Segurança de roteamento: um cartao por ASN ---------- */
.mw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.mw-card { position: relative; display: grid; gap: 14px; padding: 16px 18px 14px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--g) 10%, var(--surface-2)) 0%, var(--surface-2) 45%); }
.mw-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--g); }
.mw-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mw-h .m-grade.small { width: 48px; height: 48px; border-radius: 13px; } .mw-h .m-grade.small span { font-size: 26px; }
.mw-id { display: grid; min-width: 0; flex: 1; } .mw-id b { font-size: 15px; letter-spacing: .01em; }
.mw-id span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-score { display: grid; justify-items: end; line-height: 1.05; } .mw-score b { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--g); }
.mw-score small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.mw-prs { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }
.mw-pr { display: grid; justify-items: center; gap: 4px; text-align: center; }
.mw-pr svg { width: 58px; height: 58px; } .mw-pr circle { fill: none; stroke-width: 5; }
.mw-d-bg { stroke: var(--border); } .mw-d-val { stroke: var(--m); stroke-linecap: round; transition: stroke-dasharray .6s; }
.mw-pr text { fill: var(--text); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mw-pr span { font-size: 11.5px; color: var(--muted); line-height: 1.2; } .mw-pr i { font-style: normal; }
.mw-f { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; }
.mw-st { color: var(--muted); } .mw-st.ok { color: var(--ok); } .mw-st.warn { color: var(--warn); } .mw-st.crit { color: var(--crit); font-weight: 600; }
.mw-st b { color: var(--text); font-weight: 600; }
.mw-more { margin-top: 12px; }
/* widget Scout */
.scw { display: grid; gap: 10px; } .scw-lead { margin: 0; font-size: 13px; color: var(--muted); }
.scw .sc-quick { margin: 0; } .scw .sc-quick .btn { padding-inline: 18px; }
.scw-off { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px;
  border: 1px dashed var(--border); border-radius: 10px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .mw-grid { grid-template-columns: 1fr; } }

/* ---------- VPN cliente L2TP/IPsec ---------- */
.vpn-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 12px; }
.vpn-head h2 { margin: 0 0 4px; } .vpn-head .hint { margin: 0; max-width: 90ch; }
.vpn-warn { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; font-size: 13px; color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.vpn-warn b { color: var(--warn); }
.vpn-routes { font-size: 12px; line-height: 1.5; }
.vpn-detail { margin-top: 4px; max-width: 42ch; font-size: 12px; }
.vpn-act { text-align: right; white-space: nowrap; } .vpn-act .btn { margin: 2px 0 2px 4px; }
.vpn-vendors { display: flex; flex-wrap: wrap; gap: 6px; }
.vpn-vendor { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.vpn-vendor:has(input:checked) { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.vpn-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vpn-script { margin: 0; max-height: 50vh; overflow: auto; padding: 12px 14px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 12.5px; line-height: 1.5; white-space: pre; }
@media (max-width: 700px) { .vpn-head { flex-direction: column; } .vpn-2 { grid-template-columns: 1fr; } .vpn-act { white-space: normal; } }
.tag.vpn-l2l { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }

/* ---------- backup de configuracao ---------- */
.bk-panel { margin-top: 16px; display: grid; gap: 10px; } .bk-panel h3 { margin: 0; }
.bk-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 14px; align-items: start; }
.bk-grid tr[data-ver] { cursor: pointer; } .bk-grid tr.bk-sel td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bk-diff { margin: 0; max-height: 60vh; overflow: auto; padding: 12px 14px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 12.5px; line-height: 1.5; white-space: pre; }
.bk-add { color: var(--ok); } .bk-del { color: var(--crit); } .bk-hunk { color: var(--info); } .bk-meta { color: var(--faint); }
@media (max-width: 900px) { .bk-grid { grid-template-columns: 1fr; } }

/* ---------- Rede e BGP ---------- */
.rd-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rd-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.rd-box { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px 12px; margin: 0; display: grid; gap: 10px; }
.rd-box legend { padding: 0 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rd-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 14px; }
.rd-info > div { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.rd-info small { font-size: 11.5px; color: var(--muted); } .rd-info b { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .rd-2 { grid-template-columns: 1fr; } }