:root { --owned: #d2d2d7; --cold: #f2ecfa; --hot: #7d2ae8; }
@media (prefers-color-scheme: dark) { :root { --owned: #3a3a3c; --cold: #2a2140; --hot: #c58bff; } }
.kpi--purple { background: linear-gradient(135deg, #af52de, #5e5ce6); }
.legend .grad { width: 48px; background: linear-gradient(90deg, var(--cold), var(--hot)); }

.plays { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.play { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--card-2); display: grid; gap: 8px; }
.play__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.play__acct { font-weight: 600; font-size: 15px; }
.play__meta { font-size: 12px; color: var(--muted); }
.play__prod { font-size: 13.5px; }
.play__prod b { color: var(--c4); font-weight: 600; }
.play__score { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.play__score .meter { flex: 1; }
.play__score .meter > span { background: var(--c4); }
.play ul { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--muted); display: grid; gap: 3px; }
.play__size { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plays__empty { color: var(--muted); font-size: 14px; }

.method { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.method h4 { font-size: 15px; margin-bottom: 6px; }
.method p { color: var(--muted); font-size: 14px; }
@media (max-width: 700px) { .method { grid-template-columns: 1fr; } }
code { font-family: var(--mono); font-size: 12px; }

.grid--wide-left { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 960px) { .grid--wide-left { grid-template-columns: minmax(0, 1fr); } }