.chart-container{max-width:1240px}
.chart-container .tool-intro{margin-bottom:26px}
.chart-container .tool-intro h1{font-size:1.65rem;letter-spacing:-.035em;margin-bottom:6px}
.chart-history{scroll-margin-top:100px}
.chart-terminal{--chart-blue:#42c5ff;--chart-grid:#25323f;--chart-panel:#111a23;--chart-tape:#15202c;--chart-ink:#edf3f8;--chart-muted:#9bacbf;--chart-up:#5ed6aa;--chart-down:#ff8b94;background:var(--chart-panel);border:1px solid var(--chart-grid);border-radius:4px;overflow:hidden;color:var(--chart-ink)}
[data-theme="light"] .chart-terminal{--chart-blue:#0879b9;--chart-grid:#dce4ec;--chart-panel:#fff;--chart-tape:#f3f7fa;--chart-ink:#172b40;--chart-muted:#617287;--chart-up:#16835e;--chart-down:#bf3547}
.chart-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px;border-bottom:1px solid var(--chart-grid);margin:0;background:var(--chart-tape)}
.chart-instrument{display:flex;align-items:center;gap:11px;min-width:0}
.chart-instrument img{flex-shrink:0}
.chart-instrument strong{font-size:1.07rem;letter-spacing:.045em;font-weight:700}
.chart-instrument strong span{color:var(--chart-muted);font-weight:400;margin:0 4px}
.chart-venue{display:block;color:var(--chart-muted);font-size:.72rem;margin-top:4px;line-height:1.5}
.chart-heading-actions{display:flex;align-items:center;gap:16px}
.chart-heading h2{font-size:.75rem;font-weight:500;color:var(--chart-muted);margin:0;line-height:1.5}
.chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;border-bottom:1px solid var(--chart-grid)}
.chart-range-buttons,.chart-style-buttons{display:flex;gap:3px;flex-wrap:wrap}
.chart-button,.chart-range-buttons button,.chart-style-buttons button{border:1px solid var(--border-color);border-radius:3px;background:var(--bg-card);color:var(--text-primary);padding:9px 12px;min-height:40px;cursor:pointer}
.chart-button{font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.3}
.chart-terminal .chart-button{color:var(--chart-muted);border-color:var(--chart-grid);background:transparent}
.chart-range-buttons button,.chart-style-buttons button{border-color:transparent;background:transparent;color:var(--chart-muted);font-family:var(--font-mono,monospace);font-size:.75rem;line-height:1.3;white-space:nowrap}
.chart-range-buttons button.active,.chart-style-buttons button[aria-pressed="true"]{color:var(--chart-blue);background:var(--chart-tape);border-color:var(--chart-grid)}
.chart-style-buttons{border-left:1px solid var(--chart-grid);padding-left:10px;flex-shrink:0}
.chart-style-buttons button{display:flex;align-items:center;gap:6px}
.chart-style-buttons svg{flex-shrink:0}
.chart-button:hover,.chart-range-buttons button:hover,.chart-style-buttons button:hover{border-color:var(--accent);color:var(--accent)}
.chart-button:focus-visible,.chart-range-buttons button:focus-visible,.chart-style-buttons button:focus-visible,.chart-wrapper canvas:focus-visible,.chart-table-details summary:focus-visible,.chart-table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.chart-wrapper canvas:focus-visible{outline-offset:-3px}
.chart-button:disabled{opacity:.5;cursor:default}
.chart-readout{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"label time" "price change";align-items:baseline;gap:8px 16px;padding:16px 20px 10px;min-height:84px;font-family:var(--font-mono,monospace);font-variant-numeric:tabular-nums}
.chart-readout-label{grid-area:label;font-family:inherit;color:var(--chart-muted);font-size:.67rem;letter-spacing:.04em;text-transform:uppercase}
#chartReadoutPrice{grid-area:price;font-size:1.42rem;font-weight:600;letter-spacing:-.04em;min-width:6ch}
#chartReadoutChange{grid-area:change;font-size:.75rem;line-height:1.5}
#chartReadoutChange[data-direction="up"]{color:var(--chart-up)}
#chartReadoutChange[data-direction="down"]{color:var(--chart-down)}
#chartReadoutChange[data-direction="flat"]{color:var(--chart-muted)}
#chartReadoutTime{grid-area:time;font-size:.72rem;color:var(--chart-muted);text-align:right}
.chart-wrapper{position:relative;padding:0 12px 0 16px;height:440px;min-height:320px}
.chart-wrapper canvas{width:100%!important;height:100%!important;touch-action:pan-y;cursor:crosshair}
.chart-loading,.chart-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:var(--chart-panel);color:var(--chart-muted);font-size:.88rem;text-align:center;padding:20px}
.chart-error{display:none}
.spinner{width:30px;height:30px;border:2px solid var(--chart-grid);border-top-color:var(--chart-blue);border-radius:50%;animation:chart-spin .8s linear infinite}
@keyframes chart-spin{to{transform:rotate(360deg)}}
.chart-terminal-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--chart-grid);padding:10px 20px;color:var(--chart-muted);font-family:var(--font-mono,monospace);font-size:.66rem;line-height:1.5}
.chart-line-key{display:inline-block;width:18px;height:2px;background:var(--chart-blue);vertical-align:middle;margin-right:6px}
.chart-keyboard-help,.chart-note{color:var(--text-secondary);font-size:.78rem;line-height:1.65;overflow-wrap:anywhere;margin:8px 0}
.chart-keyboard-help{font-size:.72rem;margin-top:12px}
.chart-period-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 20px;margin:25px 0;padding:20px 0;border-block:1px solid var(--border-color)}
.chart-period-grid dt,.chart-stat-card .stat-label{font-size:.77rem;color:var(--text-secondary);line-height:1.5}
.chart-period-grid dd{margin:8px 0;font-family:var(--font-mono,monospace);font-variant-numeric:tabular-nums;font-size:1.22rem;font-weight:600;color:var(--text-primary)}
.chart-period-grid p{margin-bottom:0;font-family:inherit;font-weight:400}
.chart-coverage{grid-column:1/-1}
.chart-coverage dd{font-size:1rem}
.chart-overview{margin:28px 0;padding:22px 0;border-block:1px solid var(--border-color)}
.chart-overview h2{font-size:.96rem;margin:0 0 18px;line-height:1.5}
.chart-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.chart-stat-card .stat-value{font-family:var(--font-mono,monospace);font-variant-numeric:tabular-nums;font-size:1.18rem;font-weight:600;margin:7px 0}
.stat-change{font-size:.84rem;margin:5px 0}
.green{color:var(--green)}.red{color:var(--red)}
.chart-actions,.chart-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.chart-actions{margin-top:16px}
#chartActionStatus{min-height:1.6em}
.chart-table-details{border-top:1px solid var(--border-color);margin:18px 0}
.chart-table-details summary{cursor:pointer;font-weight:600;font-size:.9rem;padding:16px 0}
.chart-table-wrap{overflow-x:auto}
.chart-table{width:100%;border-collapse:collapse;font-size:.85rem}
.chart-table caption{text-align:left;color:var(--text-secondary);font-size:.8rem;padding:0 0 15px;line-height:1.6}
.chart-table th,.chart-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-color);white-space:nowrap}
.chart-table th{font-weight:600;background:var(--bg-secondary)}
.chart-table td:last-child{font-family:var(--font-mono,monospace)}
.chart-pagination{margin:15px 0;justify-content:space-between}
.chart-card{border-top:1px solid var(--border-color);padding-top:22px;margin-top:28px}
.chart-card a,.chart-note a{color:var(--accent)}
#chartStatsSource{margin-bottom:0}
@media(max-width:850px){.chart-heading{align-items:flex-start}.chart-heading-actions{flex-direction:column;align-items:flex-end;gap:6px}.chart-toolbar{align-items:flex-start;flex-wrap:wrap}.chart-style-buttons{border-left:0;padding-left:0}.chart-wrapper{height:400px}}
@media(max-width:740px){.chart-stats,.chart-period-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-heading{padding:15px 12px;gap:10px}.chart-toolbar{padding:7px 9px;gap:5px}.chart-range-buttons button,.chart-style-buttons button{padding:9px 10px;min-height:42px}.chart-readout{padding:14px 12px 10px;gap:6px 10px;grid-template-areas:"label label" "price change" "time time";min-height:126px}#chartReadoutTime{text-align:left;font-size:.66rem;min-height:3em;line-height:1.5}#chartReadoutChange{font-size:.66rem;min-height:4.5em}#chartReadoutPrice{font-size:1.25rem}.chart-wrapper{padding:0 5px 0 6px;height:340px;min-height:300px}.chart-terminal-foot{padding:10px 12px}.chart-terminal-foot span:last-child{display:none}.chart-keyboard-help{font-size:.7rem}}
@media(max-width:400px){.chart-instrument strong{font-size:.96rem}.chart-venue{font-size:.63rem}.chart-heading{flex-wrap:wrap}.chart-heading-actions{width:100%;flex-direction:row;align-items:center;justify-content:space-between}.chart-stats,.chart-period-grid{gap:20px 12px}.chart-stat-card .stat-value{font-size:1rem}.chart-period-grid dd{font-size:1.1rem}.chart-range-buttons{gap:2px}.chart-range-buttons button{padding-inline:9px}.chart-wrapper{height:310px;min-height:280px}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}