:root {
  color-scheme: dark;
  --bg:#0a0f14; --panel:#121a22; --panel2:#17222c; --border:#2a3946;
  --text:#edf5f7; --muted:#91a3ad; --good:#3ddc84; --bad:#ff6464;
  --warn:#ffc857; --accent:#6db6ff;
}
* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
button,input,select,a {
  font:inherit; border:1px solid var(--border); border-radius:8px;
  background:var(--panel2); color:var(--text); padding:9px 11px;
}
a { text-decoration:none; }
button,a { cursor:pointer; }
button:hover,a:hover { border-color:var(--accent); }
.page-header {
  position:sticky; top:0; z-index:5;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:16px 20px; background:rgba(10,15,20,.97); border-bottom:1px solid var(--border);
}
.page-header h1,.page-header p { margin:0; }
.page-header p { color:var(--muted); margin-top:3px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
main { padding:20px; }
.print-header { display:none; }
.summary {
  display:grid; grid-template-columns:repeat(7,minmax(100px,1fr)); gap:9px; margin-bottom:14px;
}
.summary article {
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px;
}
.summary span { display:block; color:var(--muted); font-size:11px; }
.summary strong { display:block; font-size:24px; margin-top:3px; }
.filters {
  display:grid; grid-template-columns:minmax(250px,1fr) 210px; gap:10px; margin-bottom:14px;
}
.filters label,.dialog-card label { display:grid; gap:5px; color:var(--muted); }
.table-wrap { overflow:auto; border:1px solid var(--border); border-radius:10px; }
table { border-collapse:collapse; width:100%; min-width:1250px; background:var(--panel); }
th,td { padding:9px 8px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
th { position:sticky; top:0; background:var(--panel2); font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
td { font-size:12px; }
tbody tr:hover { background:rgba(255,255,255,.025); }
.status { font-weight:700; }
.status.online { color:var(--good); }
.status.offline { color:var(--bad); }
.status.archived { color:#c7a8ff; }
.status.unknown,.status.update { color:var(--warn); }
.muted { color:var(--muted); }
.message { padding:10px; border:1px solid var(--bad); border-radius:8px; margin-bottom:12px; color:#ffb4b4; }
.hidden { display:none!important; }
dialog {
  border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text);
  width:min(480px,calc(100% - 30px));
}
dialog::backdrop { background:rgba(0,0,0,.72); }
.dialog-card { display:grid; gap:14px; }
.dialog-card input { width:100%; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }

@media(max-width:1000px){
  .summary{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:700px){
  .page-header{align-items:flex-start;flex-direction:column}
  .filters{grid-template-columns:1fr}
  .summary{grid-template-columns:repeat(2,1fr)}
  main{padding:12px}
}

@media print {
  :root { color-scheme: light; }
  body { background:#fff; color:#000; font-size:9pt; }
  .no-print, dialog { display:none!important; }
  main { padding:0; }
  .print-header { display:block; margin-bottom:10mm; }
  .print-header h1 { margin:0 0 2mm; font-size:18pt; }
  .print-header p { margin:0; font-size:9pt; }
  .summary {
    grid-template-columns:repeat(7,1fr); gap:2mm; margin-bottom:5mm;
  }
  .summary article {
    background:#fff; border:1px solid #999; border-radius:0; padding:2mm;
  }
  .summary span { color:#444; font-size:7pt; }
  .summary strong { color:#000; font-size:13pt; }
  .table-wrap { overflow:visible; border:0; }
  table { min-width:0; width:100%; background:#fff; color:#000; table-layout:fixed; }
  th,td { border:1px solid #aaa; padding:1.3mm; word-break:break-word; }
  th { position:static; background:#eee!important; color:#000; font-size:6.5pt; }
  td { font-size:6.5pt; }
  .status.online,.status.offline,.status.archived,.status.unknown,.status.update { color:#000; }
  @page { size: landscape; margin: 8mm; }
}