
:root{--bg:#050607;--panel:#0d1012;--panel2:#12171a;--line:#253036;
--text:#f2f5f4;--muted:#9aaba7;--primary:#32e6bc;--accent:#8aa4ff;
--danger:#ff6b72;--warning:#ffca6a;--ok:#32e6bc;color-scheme:dark}
*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:Inter,
ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 85% -20%,
color-mix(in srgb,var(--primary) 12%,transparent),transparent 38%),var(--bg)}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
.shell{width:min(1180px,calc(100% - 32px));margin:0 auto}.topbar{border-bottom:1px solid
var(--line);background:rgba(5,6,7,.94)}.topbar-inner{min-height:72px;display:flex;
align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;
gap:12px;color:var(--text);font-weight:780;letter-spacing:-.02em}.brand:hover{text-decoration:none}
.brand img{width:40px;height:40px;object-fit:contain}.brand small{display:block;color:var(--muted);
font-weight:550;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.brand-mark{width:34px;height:25px;display:inline-grid;place-items:center;position:relative;
flex:0 0 auto;border:2px solid var(--primary);border-radius:70% 12%;transform:rotate(45deg);
background:transparent}.brand-mark:before{content:"";width:9px;height:9px;border-radius:50%;
background:var(--primary)}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.nav a{color:var(--muted);font-size:.9rem}.nav a.active,
.nav a:hover{color:var(--text);text-decoration:none}.nav form{margin:0}.link-button{appearance:none;
border:0;background:none;color:var(--muted);font:inherit;font-size:.9rem;padding:0;cursor:pointer}
.link-button:hover{color:var(--text)}main{padding:42px 0 72px}.eyebrow{text-transform:uppercase;
letter-spacing:.13em;color:var(--primary);font-size:.72rem;font-weight:800;margin:0 0 9px}
h1,h2,h3{letter-spacing:-.035em;line-height:1.08;margin-top:0}h1{font-size:clamp(2rem,5vw,3.6rem);
max-width:850px;margin-bottom:15px}h2{font-size:1.35rem;margin-bottom:14px}h3{font-size:1rem}
.lede{color:var(--muted);font-size:1.05rem;max-width:760px;margin:0}.section{margin-top:38px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.card{grid-column:span 4;
background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);
border-radius:16px;padding:22px;min-width:0}.card.wide{grid-column:span 8}.card.full{grid-column:1/-1}
.metric{font-size:2rem;font-weight:820;letter-spacing:-.06em}.metric-label{color:var(--muted);
font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}.score{font-size:4.5rem;
line-height:.95;font-weight:900;color:var(--primary);letter-spacing:-.09em}.score small{font-size:1rem;
letter-spacing:0;color:var(--muted)}.muted{color:var(--muted)}.fine{font-size:.8rem;color:var(--muted)}
.notice{border:1px solid var(--line);border-left:3px solid var(--primary);background:var(--panel);
padding:16px 18px;border-radius:10px}.notice.warning{border-left-color:var(--warning)}
.notice.danger{border-left-color:var(--danger)}.tag{display:inline-flex;align-items:center;padding:3px 8px;
border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.72rem;white-space:nowrap}
.tag.active,.sev-low{color:var(--ok)}.sev-critical{color:var(--danger)}.sev-high{color:#ff986b}
.sev-medium{color:var(--warning)}.table-wrap{overflow-x:auto;border:1px solid var(--line);
border-radius:14px}table{width:100%;border-collapse:collapse;background:var(--panel)}th,td{text-align:left;
padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.88rem}th{color:var(--muted);
font-size:.72rem;text-transform:uppercase;letter-spacing:.075em}tr:last-child td{border-bottom:0}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.button,button.button{display:inline-flex;
align-items:center;justify-content:center;border:1px solid var(--primary);border-radius:9px;padding:10px 15px;
font:inherit;font-weight:720;background:var(--primary);color:#04100d;cursor:pointer}.button:hover{text-decoration:none;
filter:brightness(1.05)}.button.secondary{background:transparent;color:var(--text);border-color:var(--line)}
form.stack{display:grid;gap:15px;max-width:620px}label{display:grid;gap:6px;color:var(--muted);
font-size:.82rem}input,select,textarea{width:100%;background:#080b0d;color:var(--text);border:1px solid
var(--line);border-radius:9px;padding:11px 12px;font:inherit}input:focus,select:focus,textarea:focus{outline:2px
solid color-mix(in srgb,var(--primary) 45%,transparent);border-color:var(--primary)}textarea{min-height:110px;
resize:vertical}.login{width:min(480px,100%);margin:5vh auto 0}.login .card{padding:30px}.login h1{font-size:2.15rem}
.dns{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;overflow-wrap:anywhere}
.footer{border-top:1px solid var(--line);padding:24px 0 35px;color:var(--muted);font-size:.78rem}
.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.empty{padding:30px;
text-align:center;color:var(--muted)}.demo-card{display:flex;flex-direction:column;gap:10px}.demo-card h3,
.demo-card p{margin:0}.demo-card .text-link{margin-top:auto;font-weight:760}.demo-banner{border-color:var(--primary)}
@media(max-width:850px){.card,.card.wide{grid-column:span 6}.nav{display:none}}
@media(max-width:580px){.shell{width:min(100% - 22px,1180px)}main{padding-top:28px}.card,.card.wide{
grid-column:1/-1}.topbar-inner{min-height:64px}.score{font-size:3.7rem}th,td{padding:11px 10px}}
