/* ── Base ──────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f1f5f9;color:#1e293b;line-height:1.5;padding:0 1rem 2rem}

/* ── Header ───────────────────────────────────────────────────────────── */
header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding:1.25rem 0;border-bottom:2px solid #e2e8f0;margin-bottom:1.5rem}
header h1{font-size:1.4rem;color:#0f172a}
.subtitle{font-size:.85rem;color:#64748b}
.header-right{display:flex;align-items:center;gap:.75rem}
.header-right select,.header-right button{padding:.4rem .75rem;border:1px solid #cbd5e1;border-radius:6px;background:#fff;font-size:.85rem;cursor:pointer}
.header-right button:hover{background:#6366f1;color:#fff;border-color:#6366f1}
.rate-badge{background:#fef3c7;color:#92400e;padding:.3rem .6rem;border-radius:4px;font-size:.8rem;font-weight:600}

/* ── Summary Cards ────────────────────────────────────────────────────── */
.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}
.card{background:#fff;border-radius:10px;padding:1rem 1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.card-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-bottom:.25rem}
.card-value{font-size:1.5rem;font-weight:700;color:#0f172a}
.card-anthropic{border-left:4px solid #6366f1}
.card-openrouter{border-left:4px solid #f59e0b}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:.5rem;margin-bottom:1.5rem}
.tab{padding:.6rem 1.5rem;border:none;background:#e2e8f0;border-radius:8px 8px 0 0;font-size:.9rem;cursor:pointer;font-weight:500;color:#475569;transition:all .15s}
.tab.active{background:#fff;color:#6366f1;box-shadow:0 -2px 0 #6366f1 inset}
.tab:hover{background:#fff}

.tab-content{display:none;background:#fff;border-radius:0 10px 10px 10px;padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tab-content.active{display:block}

/* ── Charts ───────────────────────────────────────────────────────────── */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.charts-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.chart-container{min-height:250px}
.chart-container h3{font-size:.95rem;margin-bottom:.75rem;color:#334155}
@media(max-width:1024px){.charts-row-3{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.charts-row{grid-template-columns:1fr}.charts-row-3{grid-template-columns:1fr}}

/* ── Tables ───────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{background:#f8fafc;text-align:left;padding:.6rem .75rem;border-bottom:2px solid #e2e8f0;font-weight:600;color:#475569;white-space:nowrap}
td{padding:.5rem .75rem;border-bottom:1px solid #f1f5f9}
tr:hover td{background:#f8fafc}
.cost{font-weight:600;color:#0f172a;white-space:nowrap}
.models-cell{max-width:300px}
.model-tag{display:inline-block;background:#ede9fe;color:#5b21b6;padding:.1rem .4rem;border-radius:4px;font-size:.75rem;margin:.1rem}
.muted{color:#94a3b8;font-style:italic}
code{background:#f1f5f9;padding:.15rem .35rem;border-radius:3px;font-size:.8rem}

/* ── Usage Details: Mini cards ────────────────────────────────────────── */
.usage-summary-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin-bottom:1.5rem}
.mini-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:.75rem 1rem;text-align:center}
.mini-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-bottom:.15rem}
.mini-value{font-size:1.3rem;font-weight:700;color:#6366f1}

/* ── Usage Details: Filter row ────────────────────────────────────────── */
.filter-row{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.filter-row select{padding:.4rem .75rem;border:1px solid #cbd5e1;border-radius:6px;background:#fff;font-size:.85rem;cursor:pointer;min-width:160px}

/* ── Usage Details: Badges ────────────────────────────────────────────── */
.team-badge{display:inline-block;background:#dbeafe;color:#1e40af;padding:.15rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600}
.terminal-tag{display:inline-block;background:#d1fae5;color:#065f46;padding:.1rem .4rem;border-radius:4px;font-size:.75rem;margin:.1rem}

/* ── Lines added/removed ──────────────────────────────────────────────── */
.lines-cell{white-space:nowrap}
.lines-add{color:#16a34a;font-weight:600;margin-right:.3rem}
.lines-rm{color:#dc2626;font-weight:600}

/* ── No data ──────────────────────────────────────────────────────────── */
.no-data{text-align:center;padding:2rem;color:#94a3b8;font-size:.95rem}

/* ── Footer ───────────────────────────────────────────────────────────── */
footer{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;padding-top:1rem;border-top:1px solid #e2e8f0;font-size:.8rem;color:#94a3b8}