:root {
  --bg: #000; --card: #16171a; --line: #26282d; --text: #f5f6f7; --muted: #8b8f98;
  --green: #22c55e; --red: #ef4444; --yellow: #eab308; --blue: #3b82f6;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
main { max-width: 520px; margin: 0 auto; padding: 12px 16px 40px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.muted { color: var(--muted); } .green { color: var(--green); } .small { font-size: 12px; }

.top { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; }
.chev { color: var(--muted); }
.logo { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #b7bcc5 60%, #6b7280); }
.logo.big { width: 72px; height: 72px; margin-bottom: 16px; }
.pill { font-size: 13px; padding: 5px 12px; border-radius: 999px; background: #0f2a18; color: var(--green); border: 1px solid #14532d; }
.pill.live { background: #2a0f0f; color: #fca5a5; border-color: #7f1d1d; }
.sub { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin: 8px 0 4px; }

.hero { margin-top: 6px; }
.balance { font-size: 46px; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.delta { display: flex; gap: 8px; align-items: center; color: var(--green); font-size: 14px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.delta.down { color: var(--red); }
.mult { background: var(--green); color: #032; font-weight: 700; padding: 2px 8px; border-radius: 8px; font-size: 13px; }
.delta.down .mult { background: var(--red); color: #fff; }

.chart { width: 100%; height: 190px; display: block; margin: 14px 0 8px; }
.ranges { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.ranges button { color: var(--green); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 999px; }
.ranges button.on { background: var(--green); color: #032; }

section { margin-top: 22px; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
h2 { font-size: 19px; }
.agents { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.agent { scroll-snap-align: start; background: var(--card); border-radius: 14px; padding: 12px; min-height: 112px; }
.agent .name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.agent .ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; }
.agent .state { font-size: 12px; margin-top: 2px; }
.agent .state.on { color: var(--green); } .agent .state.off { color: var(--muted); }
.agent .what { color: var(--muted); font-size: 12px; margin-top: 12px; line-height: 1.4; }

.activity { list-style: none; }
.activity li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.activity li.empty { color: var(--muted); justify-content: center; border: 0; }
.activity .t { font-weight: 600; } .activity .s { color: var(--muted); font-size: 12px; margin-top: 2px; }
.activity .v { text-align: right; font-variant-numeric: tabular-nums; }

.account { margin-top: 30px; text-align: center; }
.btn { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; width: 100%; font-weight: 600; }
.account p { margin-top: 8px; }

.locked { min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
@media (min-width: 700px) { .agents { grid-auto-columns: 31%; } }