:root { color-scheme: light; --brand:#029dab; --ink:#1f2d31; --muted:#65777d; --line:#dce5e7; --bg:#f3f7f8; }
* { box-sizing:border-box; }
body { margin:0; font-family:Segoe UI,system-ui,sans-serif; color:var(--ink); background:var(--bg); }
header { min-height:72px; background:#fff; border-bottom:1px solid var(--line); padding:0 5vw; display:flex; align-items:center; justify-content:space-between; }
header div { display:flex; align-items:baseline; gap:14px; } header strong { color:var(--brand); font-size:26px; } header span, header a { color:var(--muted); }
header a { text-decoration:none; } main { width:min(1240px,92vw); margin:32px auto 64px; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 6px 24px #17343d12; padding:24px; margin-bottom:22px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:6px; } h2 { font-size:19px; margin-bottom:5px; } p { color:var(--muted); margin-bottom:0; }
.auth-card,.activation-card,.table-heading { display:flex; gap:28px; align-items:center; justify-content:space-between; }
label { display:block; font-weight:600; margin-bottom:6px; } .row,.activation-card form { display:flex; gap:8px; }
input,button { min-height:40px; border-radius:6px; border:1px solid #a8babf; padding:8px 12px; font:inherit; }
input { min-width:230px; background:#fff; } button { border-color:var(--brand); background:var(--brand); color:#fff; font-weight:600; cursor:pointer; }
button:hover { filter:brightness(.94); } button.secondary { background:#667b82; border-color:#667b82; }
.summary { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.metric { background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px; } .metric span { color:var(--muted); display:block; } .metric strong { font-size:30px; }
.activation-card { align-items:flex-start; } #valid-hours { min-width:90px; width:90px; } output { display:block; padding:12px 16px; border-radius:7px; background:#e7f7f8; color:#075f67; font:bold 18px ui-monospace,monospace; user-select:all; }
.table-wrap { overflow:auto; margin-top:18px; } table { width:100%; border-collapse:collapse; min-width:900px; } th,td { border-bottom:1px solid var(--line); padding:13px 10px; text-align:left; } th { color:var(--muted); font-size:12px; text-transform:uppercase; }
.badge { display:inline-block; border-radius:999px; padding:4px 9px; font-size:12px; font-weight:700; } .online { color:#176b3a; background:#e5f6eb; } .offline,.revogado { color:#8a2e28; background:#fbe9e7; } .desatualizado,.warning { color:#855b0b; background:#fff3d6; } .healthy { color:#176b3a; background:#e5f6eb; } .error { color:#8a2e28; background:#fbe9e7; }
#message { position:fixed; right:22px; bottom:22px; max-width:440px; background:#263238; color:#fff; border-radius:8px; padding:13px 16px; box-shadow:0 6px 26px #0003; display:none; }
@media (max-width:800px) { .auth-card,.activation-card,.table-heading { align-items:stretch; flex-direction:column; } .summary { grid-template-columns:repeat(2,1fr); } .row,.activation-card form { flex-wrap:wrap; } input { min-width:0; width:100%; } }