:root{
  --bg:#0e1320; --bg2:#151c2e; --card:#1a2236; --line:#2a3552;
  --tx:#e8ecf6; --tx2:#9aa6c1; --ac:#5b8def; --ac2:#7aa2ff;
  --ok:#37c896; --warn:#ffb454; --err:#ff5c7a;
  --grad:linear-gradient(135deg,#5b8def 0%,#7aa2ff 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--tx);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5}
a{color:var(--ac2);text-decoration:none}
a:hover{color:var(--ac)}

/* ===== AUTH ===== */
.auth-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 700px at 30% -10%,#1f2a48 0%,var(--bg) 60%)}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px;width:380px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.brand-logo{width:48px;height:48px;border-radius:12px;background:var(--grad);display:grid;place-items:center;font-weight:800;color:#fff;letter-spacing:.5px}
.brand-logo.small{width:30px;height:30px;font-size:12px;border-radius:8px}
.brand-text h1{font-size:18px}
.brand-text p{color:var(--tx2);font-size:12px}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--tx2)}
.auth-form input{background:var(--bg2);border:1px solid var(--line);color:var(--tx);padding:10px 12px;border-radius:8px;font-size:14px}
.auth-form input:focus{outline:none;border-color:var(--ac)}
.auth-form button{margin-top:6px;background:var(--grad);color:#fff;border:none;padding:11px;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px}
.auth-form button:hover{filter:brightness(1.08)}
.auth-error{background:rgba(255,92,122,.12);color:var(--err);padding:8px 12px;border-radius:8px;font-size:13px;border:1px solid rgba(255,92,122,.3)}
.auth-foot{margin-top:18px;text-align:center;color:var(--tx2);font-size:12px}

/* ===== TOPBAR ===== */
.topbar{background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topbar-inner{max-width:1280px;margin:0 auto;padding:12px 24px;display:flex;justify-content:space-between;align-items:center}
.brand-mini{display:flex;align-items:center;gap:10px;font-weight:600}
.topbar-nav{display:flex;align-items:center;gap:14px}
.topbar-nav a{color:var(--tx2)}
.topbar-nav a:hover{color:var(--tx)}
.user-chip{background:var(--card);border:1px solid var(--line);padding:5px 12px;border-radius:20px;font-size:12px;color:var(--tx2)}
.btn-ghost{border:1px solid var(--line);padding:5px 12px;border-radius:6px;font-size:12px}

/* ===== CONTAINER ===== */
.container{max-width:1280px;margin:0 auto;padding:32px 24px}
.container.wide{max-width:1480px}
.page-title{margin-bottom:20px;font-size:20px;font-weight:600}

/* ===== CARDS DE DASHBOARD (HOME) ===== */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.dash-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:10px;transition:.18s;color:var(--tx)}
.dash-card:hover{transform:translateY(-3px);border-color:var(--ac);box-shadow:0 12px 32px rgba(91,141,239,.18)}
.dash-card-head{display:flex;align-items:center;gap:12px}
.dash-card h3{font-size:16px}
.dash-card p{color:var(--tx2);font-size:13px;flex:1}
.dash-icon{width:38px;height:38px;border-radius:10px;background:var(--grad);display:grid;place-items:center;font-weight:700;color:#fff}
.dash-go{color:var(--ac2);font-size:13px;font-weight:600}

.empty{padding:24px;background:var(--card);border:1px dashed var(--line);border-radius:10px;color:var(--tx2);text-align:center}

/* ===== ADMIN ===== */
.admin-section{margin-bottom:36px}
.admin-section h2{font-size:18px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.admin-section h3{font-size:14px;color:var(--tx2);margin-bottom:10px}

.metric-tabs{display:flex;gap:8px;margin-bottom:14px}
.tab{background:var(--card);border:1px solid var(--line);color:var(--tx2);padding:7px 14px;border-radius:8px;cursor:pointer;font-size:13px}
.tab.active{background:var(--ac);color:#fff;border-color:var(--ac)}
.metric-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.metric-card h4{font-size:13px;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.metric-big{font-size:30px;font-weight:700;color:var(--ac2)}
.metric-sub{font-size:12px;color:var(--tx2);margin-top:4px}

.add-form{margin-bottom:14px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.add-form summary{cursor:pointer;color:var(--ac2);font-weight:600}
.add-form[open] summary{margin-bottom:14px}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}
.grid-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--tx2)}
.grid-form label.check{flex-direction:row;align-items:center;gap:6px;color:var(--tx)}
.grid-form input{background:var(--bg2);border:1px solid var(--line);color:var(--tx);padding:8px 10px;border-radius:6px}
.grid-form button{background:var(--grad);color:#fff;border:none;padding:9px 18px;border-radius:6px;cursor:pointer;font-weight:600}

.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:13px}
table th,table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
table th{background:var(--bg2);color:var(--tx2);font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.5px}
table tr:last-child td{border-bottom:none}
table code{background:var(--bg2);padding:2px 6px;border-radius:4px;font-size:12px;color:var(--ac2)}
.actions{display:flex;flex-wrap:wrap;gap:6px}
.inline-form{display:inline-flex;gap:5px;align-items:center}
.inline-form input{background:var(--bg2);border:1px solid var(--line);color:var(--tx);padding:5px 8px;border-radius:5px;font-size:12px}
.mini{background:var(--ac);color:#fff;border:none;padding:5px 10px;border-radius:5px;cursor:pointer;font-size:12px;font-weight:600}
.mini.danger{background:var(--err)}
.mini:hover{filter:brightness(1.1)}

/* ====== Banner do agente ====== */
.agent-banner{padding:14px 18px;border-radius:8px;margin:14px 0 22px;border:1px solid var(--line);background:var(--bg2);font-size:14px;line-height:1.45}
.agent-banner.ok{border-color:#1f7a3a;background:#0d2f1c;color:#a9e9c1}
.agent-banner.warn{border-color:#a8841a;background:#3a2f0d;color:#ffe9a8}
.agent-banner.err{border-color:#a32626;background:#3a1212;color:#ffb8b8}
.agent-banner code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:3px;font-size:12px}
.agent-banner a{color:inherit;text-decoration:underline;font-weight:600}
.agent-banner hr{border:0;border-top:1px solid rgba(255,255,255,.15);margin:10px 0}
.refresh-status{font-size:12px;margin-left:6px}
.refresh-log-btn{margin-left:6px}

/* ===== Agent banner v2 (multi-agente) ===== */
.agent-pill { display:inline-block; padding:1px 8px; border-radius:10px; font-size:.78em; font-weight:600; margin-left:4px; }
.agent-pill.ok   { background:#0d2f1c; color:#7ee2a8; }
.agent-pill.warn { background:#3a2f0d; color:#f0c674; }
.agent-pill.err  { background:#3a1212; color:#ff8a8a; }
.agent-list { margin:6px 0 8px 18px; padding:0; }
.agent-list li { margin:2px 0; }
.agent-banner .muted { color:#9aa4ad; font-size:.85em; }
.agent-banner .btn-link {
  display:inline-block; margin-left:6px; padding:4px 10px; border-radius:6px;
  background:rgba(255,255,255,.08); color:inherit; text-decoration:none; font-size:.88em;
  border:1px solid rgba(255,255,255,.15);
}
.agent-banner .btn-link:hover { background:rgba(255,255,255,.16); }

/* ===== Modal: instalar agente ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 1000; padding: 40px 16px; overflow-y: auto;
}
.modal-card {
  background: #1b2027; color: #e6e9ed; border: 1px solid #2c333d;
  border-radius: 10px; padding: 24px 28px; max-width: 720px; width: 100%;
  position: relative; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.modal-card h3 { margin-top: 0; }
.modal-close {
  position: absolute; top: 8px; right: 12px; background: none; border: 0;
  color: #9aa4ad; font-size: 28px; cursor: pointer; line-height: 1;
}
.modal-close:hover { color: #fff; }
.install-steps { margin: 12px 0 16px 18px; padding: 0; }
.install-steps li { margin: 4px 0; }
.install-steps kbd {
  background: #2c333d; padding: 1px 6px; border-radius: 4px;
  border: 1px solid #3a4250; font-family: monospace; font-size: .9em;
}
.cmd-box {
  display: flex; gap: 8px; margin: 8px 0 6px;
}
.cmd-box textarea {
  flex: 1; min-height: 70px; resize: vertical;
  background: #0f1418; color: #d4e1f0; border: 1px solid #2c333d;
  border-radius: 6px; padding: 10px 12px;
  font-family: Consolas, "Courier New", monospace; font-size: .88em;
  white-space: pre; overflow-x: auto;
}
.cmd-box .mini { align-self: flex-start; }
.modal-card details { margin-top: 14px; padding-top: 10px; border-top: 1px solid #2c333d; }
.modal-card details summary { cursor: pointer; color: #9aa4ad; }
.modal-card details ul { margin: 8px 0 0 18px; }