:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #090b12; color: #f5f7ff; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 92% 0%, #26124f 0, transparent 35rem), #090b12; }
.dashboard { max-width: 1440px; margin: 0 auto; padding: 52px 32px; }
.header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 36px; }
.eyebrow { margin: 0 0 10px; color: #b892ff; font-size: .76rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.055em; line-height: 1; }
.subtitle { margin: 14px 0 0; color: #9fa7bc; }
.connection { display: inline-flex; align-items: center; white-space: nowrap; gap: 9px; padding: 10px 13px; border: 1px solid #274f47; border-radius: 999px; color: #8ce7d3; background: #102a27; font-size: .85rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #48d6b9; box-shadow: 0 0 12px #48d6b9; }.connection.offline { color: #ffacac; background: #351b22; border-color: #61323b; }.connection.offline .status-dot { background: #ff7373; box-shadow: none; }
.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }.metric, .table-card { border: 1px solid #252a3a; border-radius: 16px; background: rgba(19, 22, 34, .82); box-shadow: 0 20px 65px rgba(0,0,0,.18); }.metric { min-height: 124px; padding: 23px; display: flex; flex-direction: column; justify-content: space-between; }.metric span { color: #a1a8ba; font-size: .9rem; }.metric strong { font-size: 1.65rem; letter-spacing: -.035em; }
.table-toolbar { padding: 22px 23px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #252a3a; }.table-toolbar h2 { margin: 0; font-size: 1.1rem; }.search-label input { width: min(360px, 48vw); padding: 10px 13px; border: 1px solid #33394c; outline: 0; border-radius: 8px; background: #10131f; color: inherit; }.search-label input:focus { border-color: #aa7cff; box-shadow: 0 0 0 3px #aa7cff25; }.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; text-align: left; }th { padding: 14px 23px; color: #949cb1; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }td { padding: 17px 23px; border-top: 1px solid #202534; color: #d9deeb; }tbody tr:hover { background: #ffffff05; }td:first-child { color: #fff; font-weight: 650; }.message { text-align: center; padding: 42px; color: #a1a8ba; }.error { color: #ffacac; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 640px) { .dashboard { padding: 28px 16px; }.header, .table-toolbar { align-items: stretch; flex-direction: column; }.connection { align-self: flex-start; }.summary { grid-template-columns: 1fr; }.search-label input { width: 100%; }th, td { padding-left: 16px; padding-right: 16px; } }