:root { color-scheme: dark; --bg: #07111f; --panel: #101d2f; --line: #233650; --text: #eef5ff; --muted: #91a4bd; --accent: #57d3a2; --danger: #ff7d88; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #102747, var(--bg) 48%); color: var(--text); font: 16px/1.5 system-ui, sans-serif; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: .15rem; } h2 { font-size: 1rem; }
.eyebrow { margin: 0; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.muted, small { color: var(--muted); }
.login-shell { display: grid; place-items: center; padding: 1.25rem; }.login-card, .card { border: 1px solid var(--line); border-radius: 14px; background: #101d2ff2; box-shadow: 0 18px 50px #0005; }
.login-card { width: min(100%, 400px); padding: 2rem; } label { display: block; margin: 1rem 0 .4rem; font-weight: 650; }
input { width: 100%; border: 1px solid #3a506c; border-radius: 8px; padding: .8rem; background: #081424; color: var(--text); font: inherit; }
button { border: 0; border-radius: 8px; margin-top: 1.2rem; padding: .75rem 1rem; background: var(--accent); color: #052018; font: inherit; font-weight: 800; cursor: pointer; }
.alert { margin: 1rem 0; border-left: 3px solid var(--danger); padding: .7rem 1rem; background: #401a24; }
.topbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.4rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--line); background: #07111fdd; }
.header-status { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .55rem; }.header-status form { margin: 0; }.header-status button { margin: 0; }
.pill { border: 1px solid var(--line); border-radius: 99px; padding: .35rem .65rem; color: var(--muted); font-size: .78rem; }.pill.good { color: var(--accent); }.pill.bad, .pill.disabled { border-color: #6f3340; color: var(--danger); }
.secondary { border: 1px solid var(--line); background: transparent; color: var(--text); }.dashboard { width: min(1500px, 100%); margin: auto; padding: clamp(1rem, 4vw, 3rem); }
.summary-grid { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 1rem; }.card { padding: 1.2rem; }.metric p { color: var(--muted); font-size: .8rem; }.metric strong { display: block; font-size: 1.7rem; }.metric small { display: block; margin-top: .4rem; }
.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }.panel { min-height: 190px; }.empty-state { display: grid; min-height: 110px; place-items: center; border: 1px dashed var(--line); border-radius: 9px; padding: 1rem; color: var(--muted); text-align: center; }
.coinbase-panel { margin-top: 1rem; }.section-heading, .permissions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; }.permissions { justify-content: flex-start; margin: 1rem 0; }.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { border-bottom: 1px solid var(--line); padding: .75rem; text-align: left; white-space: nowrap; } th { color: var(--muted); font-size: .75rem; text-transform: uppercase; }.refresh-time { margin: 1rem 0 0; color: var(--muted); font-size: .8rem; }
@media (max-width: 1100px) { .summary-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .topbar { align-items: flex-start; flex-direction: column; }.header-status { justify-content: flex-start; }.summary-grid, .panel-grid { grid-template-columns: 1fr; } }