:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #e8eef9; background: #080c14; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 0, #152341 0, transparent 35%), #080c14; }
main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0; }
header, .row, .section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1 { margin: 0; font-size: clamp(36px, 6vw, 64px); letter-spacing: -.05em; } h2 { margin: 0; font-size: 18px; }
.eyebrow { margin: 0 0 8px; color: #75a7ff; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.muted, .section-title span { color: #8390a7; }
.card { margin-top: 24px; padding: 22px; border: 1px solid #202a3b; border-radius: 18px; background: rgba(15,21,33,.86); box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.auth label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
input { flex: 1; min-width: 0; padding: 13px 15px; color: inherit; background: #090e18; border: 1px solid #2a3549; border-radius: 10px; }
button { padding: 12px 18px; color: #07101f; font-weight: 800; background: #78a8ff; border: 0; border-radius: 10px; cursor: pointer; }
button.secondary { padding: 8px 12px; color: #dce8ff; background: #1a2639; }
.badge { padding: 7px 10px; border-radius: 999px; color: #a8b3c6; background: #182133; font-size: 12px; font-weight: 800; }
.badge.ok, .status-completed { color: #70e0a4; background: #102d24; }
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 24px; }
.stat { padding: 18px; border: 1px solid #202a3b; border-radius: 14px; background: #0e1522; } .stat strong { display: block; margin-top: 7px; font-size: 26px; }
.grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; }
.provider { display: flex; justify-content: space-between; gap: 12px; padding: 15px 0; border-bottom: 1px solid #202a3b; } .provider:last-child { border: 0; }
.provider small { display: block; margin-top: 4px; color: #7e8ca4; } .state { color: #f5be6b; font-size: 12px; font-weight: 800; }
.table-wrap { overflow-x: auto; margin-top: 18px; } table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 10px; border-bottom: 1px solid #202a3b; text-align: left; font-size: 13px; } th { color: #7e8ca4; font-size: 11px; text-transform: uppercase; }
.status { display: inline-block; padding: 5px 8px; border-radius: 999px; background: #1b273b; font-size: 11px; }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { main { padding-top: 30px; } header, .row { align-items: stretch; flex-direction: column; } .stats { grid-template-columns: 1fr; } }