.chart-toolbar,.chart-title,.chart-view-controls{display:flex;align-items:center;gap:12px}.chart-toolbar{justify-content:space-between;margin-bottom:16px}.swap-page .chart-title h2{margin:0;font-size:var(--text-lead);font-weight:var(--weight-semibold)}
#chart-period{font-size:var(--text-small);min-height:44px;padding:8px;background:var(--swap-panel)}
.chart-view-controls{gap:4px}.chart-view-controls button{display:grid;place-items:center;width:44px;height:44px;padding:10px;background:var(--swap-panel)}
.chart-view-controls .icon{width:22px;height:22px}.chart-view-icon{mask-image:url('../assets/icon-trade-chart.svg')}.distribution-view-icon{mask-image:url('../assets/icon-trade-distribution.svg')}
.chart-view-controls button[aria-pressed="true"]{border-color:var(--selection-border,var(--swap-ink));color:var(--selection-ink,var(--swap-ink));background:var(--selection-fill,var(--swap-field))}
.price-visualization{margin:0}.chart-surface{padding:8px 0;background:linear-gradient(180deg,var(--swap-panel),transparent);border:1px solid var(--swap-border);border-radius:var(--radius)}
#price-chart{width:100%;height:auto;display:block;color:var(--hero-accent)}
#chart-grid line{stroke:var(--swap-border);stroke-dasharray:3 5;stroke-width:1}
#chart-grid text{fill:var(--swap-muted);font-family:var(--font-sans);font-size:var(--text-meta)}
.price-visualization figcaption,.data-caption{margin:12px 0 0;font-size:var(--text-meta);color:var(--swap-muted);line-height:var(--leading-body)}
.price-visualization figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.distribution-visualization:not([hidden]){min-height:340px;display:grid;grid-template-columns:minmax(160px,1fr) minmax(200px,1fr);align-items:center;gap:24px;padding:24px;border:1px solid var(--swap-border);border-radius:var(--radius);background:var(--swap-panel)}
.distribution-ring{position:relative;max-width:240px;width:100%;margin:auto;color:var(--hero-accent)}.distribution-ring svg{display:block;width:100%}.distribution-ring>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:var(--swap-ink)}.distribution-ring strong{font-size:var(--text-large);font-weight:var(--weight-semibold)}.distribution-ring span{font-size:var(--text-small);color:var(--swap-muted)}
.distribution-liquidity{opacity:.55}.distribution-circulation{opacity:.25}
.distribution-legend{margin:0;font-size:var(--text-small)}.distribution-legend>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--swap-border)}.distribution-legend dt{display:flex;align-items:center;gap:8px}.distribution-legend i{display:inline-block;width:8px;height:8px;background:var(--hero-accent)}.distribution-legend dd{margin:0;white-space:nowrap}.distribution-legend dd span{margin-left:8px;color:var(--swap-muted)}.distribution-visualization>.data-caption{grid-column:1/-1;margin:0}

@media(max-width:600px){.chart-toolbar,.chart-title{gap:8px}.distribution-visualization:not([hidden]){padding:16px;gap:16px;grid-template-columns:1fr}.distribution-ring{max-width:180px}}
.shared-line-chart{display:block;width:100%;height:auto;color:var(--hero-accent)}
.shared-chart-grid line{stroke:var(--swap-border);stroke-dasharray:3 5;stroke-width:1}
.shared-chart-grid text{fill:var(--swap-muted);font-family:var(--font-sans);font-size:var(--text-meta)}
.shared-chart-line{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round}