body { font-family: Arial, sans-serif; margin:0; padding:0; background:#f6f8fb; color:#222; }
header { background:#1f2a44; color:#fff; padding:1em; }
header h1 { margin:0; }
nav a { color:#fff; margin-right:1em; text-decoration:none; }
nav a:hover { text-decoration:underline; }
main { padding:2em; }
h2 { margin-top:0; }

.grid, .diag-grid { display:grid; grid-template-columns: 1fr 2fr; gap:1em; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:1em; box-shadow:0 1px 3px rgba(0,0,0,0.06); }

pre { background:#0b1120; color:#e2e8f0; padding:1em; border-radius:6px; overflow:auto; max-height:300px; }
input, select { width:100%; padding:0.5em; border:1px solid #d1d5db; border-radius:6px; }
button { background:#2563eb; color:#fff; border:none; padding:0.5em 0.9em; border-radius:6px; cursor:pointer; margin-right:0.5em; }
button:hover { background:#1d4ed8; }

#topology { background:#fff; border:1px solid #e5e7eb; border-radius:8px; height:500px; }
footer { text-align:center; padding:1em; background:#1f2a44; color:#fff; margin-top:2em; }