:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #0b1020; color: #edf2ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #172449, #0b1020 55%); }
.login-body { display: grid; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); padding: 32px; border: 1px solid #2b3d68; border-radius: 20px; background: rgba(17, 27, 52, .94); box-shadow: 0 24px 80px #0007; }
.brand { color: #86a8ff; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 10px 0 4px; } h2 { margin-top: 0; }
.muted { color: #98a7c7; }
label { display: grid; gap: 7px; margin: 18px 0; color: #c9d5ee; }
input { width: 100%; padding: 13px 14px; border: 1px solid #385184; border-radius: 10px; background: #0c1530; color: white; font: inherit; }
button { width: 100%; padding: 13px; border: 0; border-radius: 10px; background: #5d83ee; color: white; font-weight: 700; cursor: pointer; }
.error { min-height: 1.4em; color: #ff8f9d; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 16px max(20px, calc((100% - 1120px)/2)); border-bottom: 1px solid #26375f; background: #0d1730e8; }
.topbar span { margin-left: 12px; color: #98a7c7; }.topbar button { width: auto; }
.secondary { background: #26375f; }
.container { max-width: 1120px; margin: 0 auto; padding: 28px 20px 60px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0; }
.cards article, .panel { border: 1px solid #2b3d68; border-radius: 14px; background: #101b36d9; }
.cards article { display: grid; gap: 8px; padding: 18px; }.cards strong { font-size: 2rem; }.cards span { color: #aebbd5; }
.warning { border-color: #d39b42 !important; }.danger { border-color: #d85d72 !important; }
.panel { padding: 20px; margin: 16px 0; }.pills { display: flex; gap: 10px; flex-wrap: wrap; }.pills span { padding: 7px 10px; border-radius: 999px; background: #20335d; }
.notification-feed { display: grid; gap: 14px; }
.notification-card { padding: 16px; border: 1px solid #2b3d68; border-radius: 12px; background: #0c1530; }
.notification-card h3 { margin: 8px 0 12px; }
.notification-card pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #d9e3f8; font: inherit; line-height: 1.5; }
.notification-meta { display: flex; gap: 12px; flex-wrap: wrap; color: #98a7c7; font-size: .9rem; }
.ok { color: #73d6a0; }.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; }th, td { padding: 11px; text-align: left; border-bottom: 1px solid #26375f; }
@media (max-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }