:root { color-scheme: dark; }
body { margin: 0; font-family: ui-sans-serif, system-ui; background: #0b1020; color: #e8ecf3; }
.container { max-width: 980px; margin: 2rem auto; padding: 1rem; }
h1 { margin-bottom: .2rem; }
.muted { color: #9fb0c9; }
.grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 1rem 0; }
label { display: flex; flex-direction: column; font-size: .9rem; gap: .3rem; }
input { padding: .55rem; border-radius: 8px; border: 1px solid #2b3552; background: #111833; color: #fff; }
.actions { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
button { padding: .6rem .9rem; border-radius: 8px; border: 0; cursor: pointer; background: #3c7dff; color: #fff; }
button:nth-child(2) { background: #3a415e; }
.cards { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { background: #121a36; border: 1px solid #2b3552; border-radius: 12px; padding: .9rem; }
.card .k { font-size: .85rem; color: #9fb0c9; }
.card .v { font-size: 1.2rem; margin-top: .35rem; font-weight: 700; }
.raw { margin-top: 1rem; background: #0f1530; border: 1px solid #26304e; padding: .8rem; border-radius: 10px; overflow: auto; }
.good { color: #4ade80; }
.bad { color: #f87171; }