:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e7eef7;background:#08111d;line-height:1.45}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 0%,#12324a 0,#08111d 42%);min-height:100vh}.topbar{max-width:1180px;margin:auto;padding:28px 24px 12px;display:flex;align-items:center;justify-content:space-between}.shell{max-width:1180px;margin:auto;padding:16px 24px 56px}.eyebrow{font-size:11px;letter-spacing:.18em;color:#76c7c0;font-weight:700;margin:0 0 6px}.topbar h1,.login-box h1{font-size:28px;margin:0;letter-spacing:-.04em}.hero{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:42px 0 28px}.hero h2{font-size:38px;line-height:1.05;max-width:650px;margin:0 0 12px;letter-spacing:-.05em}.hero-mark{width:70px;height:70px;border:1px solid #4c9d9d;border-radius:20px;display:grid;place-items:center;color:#8ce2d5;font-weight:800;font-size:22px;background:#0d2735}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat,.panel{background:rgba(14,31,47,.86);border:1px solid rgba(149,193,210,.16);border-radius:16px}.stat{padding:18px}.stat span,.stat strong{display:block}.stat span{color:#91a7b8;font-size:13px}.stat strong{font-size:30px;margin-top:8px}.stat.warning strong{color:#f2c86b}.stat.danger strong{color:#f08f91}.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.panel{padding:22px}.panel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}.panel h3{margin:0;font-size:20px}.muted{color:#91a7b8}.form{display:grid;gap:13px}.form label{display:grid;gap:6px;color:#a9bac8;font-size:13px}.form input,.form textarea{width:100%;background:#081521;color:#e7eef7;border:1px solid #294052;border-radius:9px;padding:11px 12px;font:inherit}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.row:has(label:nth-child(3)){grid-template-columns:repeat(3,1fr)}button{font:inherit;cursor:pointer}.primary{background:#83ded0;color:#07131c;border:0;border-radius:9px;padding:11px 15px;font-weight:800}.ghost,.small{background:transparent;color:#bce6e0;border:1px solid #3e7275;border-radius:8px;padding:9px 13px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:900px}th,td{text-align:left;padding:13px 10px;border-bottom:1px solid rgba(149,193,210,.13);vertical-align:middle}th{color:#86a2b2;font-size:11px;text-transform:uppercase;letter-spacing:.08em}td small{display:block;color:#768f9f;margin-top:4px}td a{color:#d9f7f1;text-decoration:none}.pill{display:inline-block;border-radius:999px;padding:4px 9px;font-size:11px}.pill.active{background:#164c4a;color:#a3f2dd}.pill.expiring{background:#5a471b;color:#ffe2a0}.pill.expired,.pill.suspended{background:#5a222d;color:#ffc0c0}.inline-form{display:flex;gap:5px}.inline-form input{min-width:120px;background:#081521;color:#e7eef7;border:1px solid #294052;border-radius:7px;padding:8px}.small{padding:7px 9px}.notice{padding:11px 14px;border-radius:9px;margin:8px 0 16px}.notice.success{background:#123d37;color:#a7f3dc}.notice.error{background:#4a2029;color:#ffc4c4}.empty{text-align:center;color:#829aaa;padding:30px}.login-page{display:grid;place-items:center;padding:24px}.login-box{width:min(410px,100%);background:#0e1f2f;border:1px solid rgba(149,193,210,.18);border-radius:18px;padding:32px}.login-box .hero-mark{margin-bottom:22px}.login-box h1{font-size:38px;margin-bottom:8px}.back{color:#9de3d8;text-decoration:none;font-size:13px}.quota{display:grid;text-align:right;gap:3px}.quota strong{font-size:38px;color:#9de3d8}.quota span,.quota small{color:#91a7b8}@media(max-width:850px){.stats{grid-template-columns:repeat(2,1fr)}.grid.two{grid-template-columns:1fr}.hero{align-items:flex-start}.hero h2{font-size:31px}.quota{text-align:left}.topbar{align-items:flex-start}}@media(max-width:520px){.shell,.topbar{padding-left:15px;padding-right:15px}.stats{grid-template-columns:1fr 1fr}.row,.row:has(label:nth-child(3)){grid-template-columns:1fr}.hero{display:block}.hero-mark{margin-top:22px}.panel{padding:16px}.inline-form{flex-wrap:wrap}}



/* ===== Mapa de nós (overview) ===== */
.map-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-bottom:18px}
.map-panel{overflow:hidden}
.map-wrap{position:relative}
#map{width:100%;height:auto;border-radius:14px;border:1px solid rgba(149,193,210,.16);background:#0a1725;display:block;touch-action:none}
#map.zoomed{cursor:grab}
#map.zoomed:active{cursor:grabbing}
.map-zoom{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:5}
.map-zoom button{width:38px;height:38px;border-radius:10px;border:1px solid rgba(149,193,210,.24);background:rgba(10,23,37,.86);color:#dceaf5;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:1px;backdrop-filter:blur(4px);transition:background .15s,border-color .15s}
.map-zoom button span{font-size:12px}
.map-zoom button:hover{background:rgba(20,44,66,.95);border-color:rgba(123,229,180,.5)}
.map-zoom button:active{transform:translateY(1px)}
.node.node-new .core{animation:nodePop 1.2s ease-out 3}
.node.node-new .halo{animation:nodeHalo 1.2s ease-out 3}
@keyframes nodePop{0%{r:5.5}50%{r:9}100%{r:5.5}}
@keyframes nodeHalo{0%{opacity:.35}50%{opacity:.9}100%{opacity:.35}}
.map-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:12px;color:#a9bac8}
.map-legend span{display:flex;align-items:center;gap:7px}
.map-legend .lg{width:14px;height:14px;border-radius:50%;display:inline-block}
.map-legend .lg.dot-origin{background:#ffd166}
.map-legend .lg.dot-dns{background:#8ab4ff}
.map-legend .lg.dot-edge{background:#7be5b4}
.map-legend .lg.ln-sync{width:20px;height:0;border-top:2px solid #83ded0;border-radius:0}
.map-legend .lg.ln-axfr{width:20px;height:0;border-top:2px dashed #8ab4ff;border-radius:0}

/* SVG nodes */
.nlabel{fill:#e7eef7;font-size:15px;font-weight:700}
.nsub{fill:#7f9aab;font-size:11px;letter-spacing:.14em}
.core{stroke:#08111d;stroke-width:2}
.core.dot-origin{fill:#ffd166}.core.dot-dns{fill:#8ab4ff}.core.dot-edge{fill:#7be5b4}
.halo{opacity:.18;filter:url(#glow)}
.halo.dot-origin{fill:#ffd166}.halo.dot-dns{fill:#8ab4ff}.halo.dot-edge{fill:#7be5b4}
.node.is-up .halo{animation:pulse 2.4s ease-out infinite}
.node.is-down .core{fill:#f0797c}
.node.is-down .halo{fill:#f0797c;opacity:.12;animation:none}
.node.is-down .nlabel{fill:#f0a9ab}
@keyframes pulse{0%{opacity:.28;r:14}70%{opacity:0;r:30}100%{opacity:0;r:30}}

/* SVG links */
.link{stroke:#2c4d63;stroke-width:2;opacity:.5}
.link-axfr{stroke-dasharray:6 6}
.link.is-live.link-sync{stroke:#83ded0;opacity:.9;stroke-dasharray:8 10;animation:flow 1.1s linear infinite}
.link.is-live.link-axfr{stroke:#8ab4ff;opacity:.85;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-36}}

/* Node list */
.node-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.node-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:11px;padding:11px 13px;border:1px solid rgba(149,193,210,.14);border-radius:11px;background:#0b1c2b}
.node-row.down{border-color:#5a222d;background:#1c1113}
.node-row .ndot{width:11px;height:11px;border-radius:50%}
.ndot.dot-origin{background:#ffd166}.ndot.dot-dns{background:#8ab4ff}.ndot.dot-edge{background:#7be5b4}
.node-row.down .ndot{background:#f0797c}
.ninfo strong{display:block;font-size:14px}
.ninfo small{color:#7f9aab}
.npill{font-size:11px;border-radius:999px;padding:4px 10px}
.npill.ok{background:#164c4a;color:#a3f2dd}
.npill.bad{background:#5a222d;color:#ffc0c0}
.nlat{font-size:12px;color:#9fb4c4;min-width:56px;text-align:right;font-variant-numeric:tabular-nums}

/* === Top nav separators === */
.top-actions a.back + a.back::before{content:'|';margin:0 10px;color:rgba(148,163,184,0.35);pointer-events:none}

/* ===== Gráficos de consumo ===== */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.chart-box{position:relative;height:280px}
.chart-box canvas{max-height:280px}
.chart-empty{display:grid;place-items:center;height:200px;color:#829aaa;text-align:center}
.chart-empty[hidden]{display:none}
@media(max-width:900px){.map-grid{grid-template-columns:1fr}.chart-grid{grid-template-columns:1fr}}



/* --- Consumption charts layout --- */
.charts-row{margin-bottom:18px}
.chart-card .panel-head{margin-bottom:8px}
.charts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}
.chart-card-inner{background:rgba(15,23,42,0.35);border:1px solid rgba(148,163,184,0.10);border-radius:14px;padding:14px 14px 6px}
.chart-card-inner h4{margin:0 0 6px;font-size:13px;font-weight:600;color:#cdd8e6;letter-spacing:.02em}
.chart-card-inner .chart-box{height:220px}
.chart-card-inner .chart-box canvas{max-height:220px}
@media (max-width:820px){.charts-grid{grid-template-columns:1fr}}



/* ===== Página de Nós (provisionamento) ===== */
.node-reg-meta span{color:#94a9ba}
.howto{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.howto li{position:relative;padding-left:26px;color:#c2d2df;font-size:14px;line-height:1.5}
.howto li::before{content:'✓';position:absolute;left:0;top:0;color:#83ded0;font-weight:800}
.node-cards{display:grid;gap:14px}
.node-reg{background:rgba(9,20,32,.7);border:1px solid rgba(149,193,210,.16);border-radius:14px;padding:16px 18px}
.node-reg.pending{border-color:#5a471b}
.node-reg.approved{border-color:#2a5e58}
.node-reg.installed{border-color:#164c4a}
.node-reg.rejected{opacity:.55}
.node-reg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.node-reg-head strong{font-size:16px;margin-right:8px}
.node-reg-actions{display:flex;gap:6px;flex-wrap:wrap}
.node-reg-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;font-size:13px}
.npill.role{background:#0d2735;color:#8ce2d5;border:1px solid #2a5e58}
.npill.st-created{background:#1c3350;color:#a9c8ff}
.npill.st-pending{background:#5a471b;color:#ffe2a0}
.npill.st-approved{background:#123d37;color:#a7f3dc}
.npill.st-installed{background:#164c4a;color:#a3f2dd}
.npill.st-rejected{background:#5a222d;color:#ffc0c0}
.danger-button{background:transparent;color:#ffc0c0;border:1px solid #7a3540;border-radius:8px;padding:7px 9px}
.cmd-row{margin-top:14px}
.cmd-row .muted{margin:0 0 6px;font-size:13px}
.cmd-box{display:flex;align-items:center;gap:8px;background:#050d16;border:1px solid #223648;border-radius:10px;padding:10px 12px}
.cmd-box code{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:#9de3d8;overflow-x:auto;white-space:nowrap}
.copy-btn{white-space:nowrap}



/* ===== Nav ativo + stats clicáveis ===== */
.top-actions a.back.current{color:#8ce2d5;font-weight:700}
.stat.link{text-decoration:none;color:inherit;display:block;transition:border-color .15s,transform .15s}
.stat.link:hover{border-color:#4c9d9d;transform:translateY(-2px)}
.stat.threat strong{color:#ffb27a}
.help-panel{display:flex;flex-direction:column;justify-content:center}
.help-panel .muted a{color:#9de3d8}

/* ===== Página de Segurança ===== */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tabs .tab{text-decoration:none;color:#bce6e0;border:1px solid #2a4658;border-radius:999px;padding:7px 15px;font-size:13px;background:#0b1a28}
.tabs .tab:hover{border-color:#4c9d9d}
.tabs .tab.active{background:#123d37;color:#a7f3dc;border-color:#2a5e58;font-weight:700}
.sec-table code.ua,.feed code.ua{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#9fb4c4}
.sec-table td small.ua{color:#6f8798;font-size:11px}
tr.is-blocked{background:rgba(90,34,45,.28)}
.cat-pill{display:inline-block;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:600;margin-right:4px}
.cat-clean{background:#123d37;color:#a7f3dc}
.cat-suspicious{background:#5a471b;color:#ffe2a0}
.cat-bot{background:#5a3a1b;color:#ffcf9e}
.cat-scanner{background:#5a222d;color:#ffc0c0}
.cat-blocked{background:#3a1220;color:#ff9db0;border:1px solid #7a3540}
.sec-actions{display:flex;gap:6px;flex-wrap:wrap}
.ok-button{background:transparent;color:#a7f3dc;border:1px solid #2a5e58;border-radius:8px;padding:7px 9px}
.ok-button:hover{background:#123d37}

/* ===== Feed de eventos ===== */
.feed{display:grid;gap:2px}
.feed-row{display:grid;grid-template-columns:120px 150px 1fr 200px 150px;gap:12px;align-items:center;padding:9px 10px;border-bottom:1px solid rgba(149,193,210,.10);font-size:13px}
.feed-row.cat-line-scanner{border-left:3px solid #f0797c}
.feed-row.cat-line-bot{border-left:3px solid #fb923c}
.feed-row.cat-line-suspicious{border-left:3px solid #f2c86b}
.feed-row.cat-line-blocked{border-left:3px solid #7a3540}
.feed-ip{font-weight:600}
.feed-ip small,.feed-ua{display:block;color:#768f9f;font-size:11px;margin-top:2px}
.feed-ua{color:#8098a8}
.feed-ts{color:#768f9f;font-size:11px;text-align:right}
.feed-req code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#9fb4c4}
@media(max-width:820px){.feed-row{grid-template-columns:1fr 1fr;gap:6px}.feed-ts,.feed-ua{text-align:left}}

/* ===== Navegação de topo responsiva + logo ===== */
.top-actions{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.topbar .brand-row{display:flex;align-items:center;gap:12px}
.topbar .brand-logo{width:40px;height:40px;flex:0 0 auto}
@media(max-width:820px){
  .topbar{flex-direction:column;align-items:stretch;gap:12px;padding:18px 16px 8px}
  .top-actions{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;gap:0;scrollbar-width:thin}
  .top-actions a.back{white-space:nowrap;padding:6px 2px;font-size:14px}
  .top-actions form{margin-left:auto;flex:0 0 auto}
  .topbar h1,.login-box h1{font-size:24px}
  .brand-row .eyebrow{font-size:10px}
}
@media(max-width:520px){
  .top-actions a.back + a.back::before{margin:0 7px}
  .stat strong{font-size:24px}
  .sec-table,table{font-size:13px}
  .sec-actions{display:flex;flex-direction:column;gap:4px}
  .sec-actions .inline-form{width:100%}
  .sec-actions button{width:100%}
}
/* logo no ecrã de login */
.login-box .brand-logo{width:64px;height:64px;margin-bottom:18px}

/* --- Whitelist / Alertas / Relatório (features Ago 2026) --- */
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .06s ease,background .15s ease}
.btn-primary{background:linear-gradient(135deg,#5bb9ad,#3d9488);color:#04120f;border:none}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn-ghost{background:rgba(148,163,184,0.08);color:#cdd8e6;border-color:rgba(148,163,184,0.22)}
.btn-ghost:hover{background:rgba(148,163,184,0.16)}
.small-note{font-size:12.5px;line-height:1.5;margin:4px 0 14px}
.wl-form,.alert-form{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.wl-form{flex-direction:row;flex-wrap:wrap;align-items:center}
.wl-form input[type=text]{flex:1;min-width:150px}
.alert-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#9fb0c7;font-weight:600}
.wl-form input,.alert-form input{padding:10px 12px;border-radius:9px;border:1px solid rgba(148,163,184,0.25);background:rgba(9,17,29,0.6);color:#e8eef7;font-size:14px}
.wl-form input:focus,.alert-form input:focus{outline:none;border-color:#5bb9ad}
.alert-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

@media (max-width:820px){
  .hero-actions{width:100%}
  .hero-actions .btn-primary,.hero-actions .btn-ghost{flex:1;justify-content:center;min-width:calc(50% - 6px)}
}
@media (max-width:520px){
  .wl-form{flex-direction:column;align-items:stretch}
  .wl-form input[type=text]{width:100%}
  .wl-form .btn-primary{width:100%;justify-content:center}
  .alert-buttons .btn-primary,.alert-buttons .btn-ghost{flex:1;justify-content:center}
}



/* ===== Mapa-múndi ao vivo (overview) ===== */
.country{fill:#132b40;stroke:#22506a;stroke-width:.5;vector-effect:non-scaling-stroke}
.nlabel.mini{font-size:10px;font-weight:700}
.core.mini{stroke-width:1.5}
.map-legend .lg.ln-conn{width:20px;height:0;border-top:2px solid #57e0d0;border-radius:0}
.map-legend .lg.ln-threat{width:20px;height:0;border-top:2px solid #f0797c;border-radius:0}

/* Arcos de conexões a entrar */
.conn-arc{fill:none;stroke-width:1.4;opacity:.55}
.conn-arc.conn-ok{stroke:#57e0d0}
.conn-arc.conn-threat{stroke:#f0797c;opacity:.7}
.conn-src{stroke:#0a1725;stroke-width:1}
.conn-src.conn-ok{fill:#57e0d0}
.conn-src.conn-threat{fill:#f0797c}
.conn-pulse.conn-ok{fill:#8ff0e4}
.conn-pulse.conn-threat{fill:#ffb0b2}
.ndot.dot-threat{background:#f0797c}

/* Lista "de onde vêm" */
.conn-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.conn-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 11px;border:1px solid rgba(149,193,210,.14);border-radius:10px;background:#0b1c2b;font-size:13px}
.conn-list li.threat{border-color:#5a222d;background:#1c1113}
.conn-list .cflag{font-size:16px}
.conn-list .cname strong{display:block;font-size:13px}
.conn-list .cname small{color:#7f9aab;font-size:11px}
.conn-list .chits{font-weight:700;color:#9fe6da}
.conn-list li.threat .chits{color:#ffb0b2}
.conn-sub{font-size:12px;letter-spacing:.14em;color:#7f9aab;text-transform:uppercase;font-weight:700;margin:20px 0 0}
@media(max-width:850px){.map-grid{grid-template-columns:1fr}}



/* ---- Frota de nós (página Nós) ---- */
.count-badge{display:inline-block;min-width:1.6em;padding:.05em .5em;margin-left:.35em;border-radius:999px;background:#1f6feb;color:#fff;font-size:.72em;font-weight:700;text-align:center;vertical-align:middle}
.fleet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.7rem;margin-top:.9rem}
.fleet-card{display:flex;align-items:center;gap:.65rem;padding:.7rem .8rem;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.025)}
.fleet-card .fleet-main{display:flex;flex-direction:column;gap:.12rem;min-width:0;flex:1}
.fleet-card .fleet-main strong{font-size:.96rem}
.fleet-card .fleet-meta{color:#8aa0b6;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fleet-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:#6b7787;box-shadow:0 0 0 3px rgba(107,119,135,.18)}
.fleet-card.is-up .fleet-dot{background:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.2)}
.fleet-card.is-down .fleet-dot{background:#e74c3c;box-shadow:0 0 0 3px rgba(231,76,60,.2)}
.fleet-state{font-size:.74rem;color:#8aa0b6;flex:0 0 auto;text-align:right}
.fleet-card.is-up .fleet-state{color:#2ecc71}
.fleet-card.is-down .fleet-state{color:#e74c3c}