:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --bg: #07111f; --panel: #0f1d31; --line: #243753; --text: #f0f5ff; --muted: #9fb0ca; --good: #35d49a; --warn: #ffc857; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: radial-gradient(circle at top right, #173661, var(--bg) 48%); }
button, a { font: inherit; }
button, a { border: 1px solid #35547d; border-radius: 8px; padding: .65rem .9rem; color: var(--text); background: #172943; text-decoration: none; font-weight: 700; cursor: pointer; }
button:hover, a:hover { background: #244268; }
.monitor-topbar { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: clamp(1.2rem, 3vw, 2.5rem) clamp(1rem, 4vw, 4rem) 1.2rem; border-bottom: 1px solid rgba(159,176,202,.2); }
.kicker { margin: 0 0 .35rem; color: #71a8ff; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: .35rem; font-size: clamp(1.8rem, 3vw, 3rem); } h2 { margin-bottom: 0; font-size: clamp(1.15rem, 2vw, 1.7rem); }
.monitor-topbar p:last-child, .panel-heading > span { margin: 0; color: var(--muted); font-size: .88rem; }
.monitor-actions { display: flex; align-items: center; gap: .7rem; color: var(--muted); white-space: nowrap; }
.monitor-main { display: grid; gap: 1.1rem; padding: 1.1rem clamp(1rem, 4vw, 4rem) 2rem; }
.status-banner, .monitor-panel { border: 1px solid var(--line); border-radius: 14px; background: rgba(15,29,49,.92); }
.status-banner { display: grid; gap: .3rem; padding: 1rem 1.2rem; border-left: 5px solid var(--warn); } .status-banner.healthy { border-left-color: var(--good); } .status-banner strong { font-size: 1.2rem; } .status-banner span { color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.metric-grid article, .security-grid article { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(15,29,49,.92); }
.metric-grid span, .security-grid span { display: block; color: var(--muted); font-size: .78rem; } .metric-grid strong { display: block; margin-top: .5rem; font-size: clamp(1.2rem, 2.3vw, 2rem); }
.monitor-panel { padding: 1.1rem; } .panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.resource-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.resource-grid article { padding: .9rem; border: 1px solid var(--line); border-radius: 10px; background: #0b1728; }
.resource-grid span { display: block; color: var(--muted); font-size: .78rem; }
.resource-grid strong { display: block; margin-top: .4rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.resource-grid article { min-height: 72px; }
.privacy-note { color: var(--muted); font-size: .82rem; }
.security-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; } .security-grid article { border-left: 4px solid var(--warn); } .security-grid article.secure { border-left-color: var(--good); } .security-grid strong { display: block; margin-top: .45rem; color: var(--good); } .security-grid .attention strong { color: var(--warn); }
.table-wrap { overflow: auto; } table { width: 100%; min-width: 600px; border-collapse: collapse; } th, td { padding: .75rem .6rem; border-bottom: 1px solid rgba(159,176,202,.16); text-align: left; } th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } td { font-size: .9rem; }
@media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .monitor-topbar { align-items: flex-start; flex-direction: column; } .monitor-actions { flex-wrap: wrap; white-space: normal; } .metric-grid, .security-grid, .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }