.metrics{gap:var(--s-3);margin-bottom:var(--s-6);grid-template-columns:repeat(4,1fr);display:grid}.metric{align-items:center;gap:2px var(--s-4);padding:var(--s-4) var(--s-5);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg);color:inherit;transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);grid-template-rows:auto auto;grid-template-columns:auto 1fr;text-decoration:none;display:grid;position:relative}.metric:not(.metric-passive):hover{background:var(--surface-2);border-color:var(--line-strong)}.metric-icon{border-radius:var(--r-md);background:var(--surface-2);width:36px;height:36px;color:var(--fg-2);grid-row:1/span 2;justify-content:center;align-items:center;display:inline-flex}.metric:not(.metric-passive):hover .metric-icon{color:var(--accent)}.metric-body{flex-direction:column;gap:2px;min-width:0;display:flex}.metric-value .num{font-size:var(--t-xl);letter-spacing:var(--tracking-tight);font-weight:600;line-height:1.1}.metric-label{font-size:var(--t-sm);color:var(--fg-2)}.metric-sub{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line-soft);font-size:var(--t-xs);grid-column:1/-1}.grid{gap:var(--s-4);grid-template-columns:1fr 1fr;display:grid}.panel-span-2{grid-column:1/-1}.panel-link{color:var(--accent);font-size:var(--t-sm);border-radius:var(--r-sm);align-items:center;gap:4px;padding:4px 8px;text-decoration:none;display:inline-flex}.panel-link:hover{background:var(--accent-soft)}.panel-link .ico{width:14px;height:14px}.list{flex-direction:column;max-height:360px;display:flex;overflow-y:auto}.list-empty{padding:var(--s-5) var(--s-4);font-size:var(--t-sm);font-style:italic}.list .row{margin:2px var(--s-2)}.stage-chip{border-radius:var(--r-pill);letter-spacing:var(--tracking-wide);flex-shrink:0;align-items:center;padding:2px 8px;font-size:10px;font-weight:500;display:inline-flex}.usage-grid{gap:var(--s-2);grid-template-columns:repeat(6,1fr);display:grid}.stat-tile{padding:var(--s-3) var(--s-4);background:var(--surface-2);border-radius:var(--r-md);flex-direction:column;gap:4px;display:flex}.stat-val{font-size:var(--t-lg);letter-spacing:var(--tracking-tight);font-weight:600;line-height:1.1}.stat-val.cost{color:var(--ok)}.stat-val.tok{color:var(--accent)}.stat-label{font-size:var(--t-xs);color:var(--fg-3)}.rate{border-radius:var(--r-sm);font-family:var(--font-mono);font-size:var(--t-xs);color:var(--fg-3);padding:2px 8px}.rate.high{color:var(--danger);background:var(--danger-soft)}.rate.mid{color:var(--warn);background:var(--warn-soft)}.rate.low{color:var(--ok);background:var(--ok-soft)}@media (width<=900px){.metrics{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.usage-grid{grid-template-columns:repeat(3,1fr)}}