/* TickShot reading and alignment principles, adapted to CoinGlass. */
:root {
  --bg: #0d1014;
  --panel: #13181e;
  --raised: #1b222a;
  --line: #2a323c;
  --text: #f2f5f7;
  --muted: #a1adb9;
  --green: #b7f759;
  --positive: #a3e881;
  --red: #fb9389;
}
header { height: 68px; }
nav a { font-size: 15px; font-weight: 600; color: #b7c0ca; }
.ticker { font-size: 12px; border-color: var(--line); }
.ticker b { color: #dce2e8; }
.ticker-note { font-size: 11px; }
main { padding-top: 20px; }
.breadcrumb { font-size: 12px; }
.page-heading { margin: 20px 0 24px; }
.eyebrow { color: #a0ad96; }
h1 { font-size: 32px; margin: 7px 0; }
.live-dot { box-shadow: none; background: #a1adb9; }
p { font-size: 13px; }
.page-tabs { margin-bottom: 20px; }
.page-tabs > button { font-size: 14px; font-weight: 500; color: #a6b0ba; }
.tabs-note { font-size: 12px; }
.stat { background: var(--panel); padding: 18px 20px; }
.stat:first-child { background: linear-gradient(110deg,#1c2719,var(--panel) 85%); border-color: #425335; }
.stat-label { color: #c0c9bc; font-size: 13px; }
.stat .coin-logo { width: 23px; height: 23px; }
.stat-value { font-size: 31px; margin: 12px 0 9px; }
.stat-foot { font-size: 12px; color: #aab5a2; }
.stat-foot b { color: #d7e1ce; }
.spark { width: 66px; height: 25px; opacity: .6; bottom: 18px; }
.insight { font-size: 12px; margin: 16px 0 20px; padding: 11px 16px; background: #182018; color: #c2cdbb; border-color: #303c2a; }
.section-heading { padding: 20px 22px 17px; }
h2 { font-size: 18px; }
.section-heading p { font-size: 12px; }
.quiet, .text-btn { font-size: 13px; }
.segmented { background: var(--bg); flex-shrink: 0; }
.segmented button, .segments button { font-size: 12px; white-space: nowrap; }
.toolbar { padding: 0 22px 17px; }
select { background-color: var(--raised); border-color: #3a444f; color: var(--text); font-size: 13px; height: 38px; line-height: 18px; padding: 9px 33px 9px 12px; }
.chart-controls select { height: 36px; }
.search { height: 38px; background: #10151a; }
.search input { font-size: 13px; }
.search kbd { border-color: #3b4651; font-size: 11px; }
.toolbar-right .quiet { height: 38px; padding: 8px 12px; }
.toolbar-right .icon-btn { width: 38px; height: 38px; }
th { font-size: 12px; padding: 14px 17px; background: #1a2129; color: #b2bdc8; }
th button { font-size: 12px; font-weight: 600; }
td { height: 58px; font-size: 14px; font-weight: 500; border-color: #242d36; }
tbody tr:hover { background: #1c242c; }
.weighted { background: #b7f75905; }
.coin-name b { font-size: 14px; color: #eef2f5; }
.coin-name small { font-size: 12px; color: #9aa8b5; }
.coin-arrow { color: #738295; opacity: 0; font-size: 11px; transition: opacity .15s; }
.coin-name:hover .coin-arrow, .coin-name:focus-visible .coin-arrow { opacity: 1; }
.coin-name:hover b, .rank-coin:hover { color: var(--green); }
.favorite { color: #8a98a7; }
.coin-logo { width: 28px; height: 28px; }
.exchange { gap: 7px; }
.exchange svg { width: 18px; height: 18px; }
.table-footer { font-size: 12px; gap: 16px; }
.table-scroll { scrollbar-color: #45515b var(--panel); scrollbar-width: thin; }
.table-scroll td:first-child, .table-scroll th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
.table-scroll th:first-child { background: #1a2129; z-index: 2; }
.bottom-grid { margin-top: 24px; gap: 24px; grid-template-columns: minmax(0,1.9fr) minmax(300px,1fr); align-items: stretch; }
.history-panel, .extremes { display: flex; flex-direction: column; min-width: 0; }
.history-panel .section-heading { align-items: flex-start; flex-wrap: wrap; }
.chart-controls { gap: 8px; }
.chart-summary { padding: 0 22px; margin-bottom: 14px; }
.chart-summary strong { font-size: 29px; }
.chart-summary strong.negative { color: var(--red); }
.chart-summary > span { font-size: 12px; }
.chart-caption { display: inline; }
.axis-labels { display: flex; justify-content: space-between; padding: 0 22px; font-size: 11px; color: var(--muted); }
.axis-labels span:last-child { color: #c1b393; }
.chart { height: auto; min-height: 285px; padding: 10px 16px 0; flex: 1; display: flex; }
.chart svg { width: 100%; height: 310px; min-height: 0; display: block; overflow: visible; }
.axis-text { fill: #a1adb9; font: 11px var(--font); }
.price-axis { fill: #c1b393; }
.chart-grid { stroke: #303a45; stroke-width: 1; }
.zero-line { stroke: #596572; stroke-width: 1; }
.price-path { fill: none; stroke: #c1b393; stroke-width: 2; stroke-linejoin: round; }
.chart-hit { cursor: crosshair; }
.chart-detail { margin: 0 22px; padding: 9px 0; min-height: 35px; font-size: 11px; color: #c3ced8; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.chart-footer { font-size: 11px; color: #9ba9b6; padding-top: 12px; }
.rank-tabs { gap: 22px; padding-bottom: 10px; }
.rank-tabs button { font-size: 13px; }
.rank-row { padding: 12px 22px; }
.rank-number { color: #99a7b5; font-size: 12px; }
.rank-coin { font-size: 14px; font-weight: 600; }
.rank-row .rate { font-size: 14px; }
.rank-row .rank-bar { background: #79ad5159; }
.market-balance { margin: auto 22px 20px; padding-top: 26px; }
.market-balance > div:first-child { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
.market-balance b { color: var(--positive); font-weight: 600; }
.balance-bar { display: flex; height: 6px; gap: 3px; margin: 12px 0; }
.balance-bar span:first-child { width: 80%; background: var(--positive); border-radius: 3px 0 0 3px; }
.balance-bar span:last-child { width: 20%; background: var(--red); border-radius: 0 3px 3px 0; }
.market-balance p { font-size: 12px; }
.market-balance .red-dot { margin-left: 15px; }
.rank-note { font-size: 11px; margin-top: 0; color: #a2adb8; }
.heat-row > span { font-size: 12px; color: #b9c4cd; }
.heat-cell { font-size: 11px; height: 38px; }
.heat-legend { font-size: 12px; }
footer { font-size: 11px; color: #93a1ad; }
.small-brand span { font-size: 11px; color: #93a1ad; }
dialog { background: var(--panel); border-color: #414d58; }
dialog p { color: #b7c1cb; }
@media (min-width: 1550px) {
  main { padding-top: 24px; }
  .stat { padding: 20px 22px; }
  .stat-value { font-size: 34px; }
  .chart { height: auto; }
  .chart svg { height: 310px; }
}
@media (max-width: 1150px) {
  .stat-label { font-size: 12px; }
  .stat-value { font-size: 28px; }
  .stat-foot { font-size: 11px; }
  .stat-foot b { display: block; margin-top: 4px; }
  .spark { display: none; }
  .bottom-grid { grid-template-columns: minmax(0,1.65fr) minmax(285px,1fr); }
  .chart-caption { display: none; }
  th, td { padding-left: 13px; padding-right: 13px; }
}
@media (max-width: 760px) {
  header { height: 62px; }
  main { padding-top: 16px; }
  .page-heading { margin: 18px 0 22px; }
  h1 { font-size: 29px; }
  .page-heading p { font-size: 12px; }
  .heading-actions .primary { font-size: 12px; }
  .page-tabs { gap: 23px; }
  .page-tabs > button { font-size: 13px; }
  .stat { padding: 14px; }
  .stat-label { font-size: 11px; gap: 6px; }
  .stat-value { font-size: 26px; }
  .stat-foot { font-size: 11px; }
  .stat .coin-logo { width: 20px; height: 20px; }
  .insight { font-size: 11px; }
  .section-heading { padding: 18px 16px 16px; }
  .matrix-panel .section-heading { flex-wrap: wrap; align-items: flex-start; }
  .matrix-panel .section-heading > div:first-child { flex: 1; min-width: 155px; }
  h2 { font-size: 17px; }
  .section-heading p { font-size: 12px; }
  .toolbar { padding: 0 16px 16px; }
  .toolbar select { font-size: 12px; max-width: 155px; }
  .segments button { padding: 7px 8px; font-size: 12px; }
  td { font-size: 13px; height: 56px; }
  .coin-name b { font-size: 13px; }
  .coin-name small { font-size: 11px; }
  .table-scroll td:first-child, .table-scroll th:first-child { padding-left: 15px; }
  .table-footer { font-size: 11px; flex-wrap: wrap; }
  .legend { justify-content: flex-start; gap: 10px; }
  .bottom-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .chart-controls { width: 100%; }
  .chart-controls select { font-size: 12px; flex: 1; padding: 8px 30px 8px 12px; background-position: right 10px center; }
  .chart-summary { padding: 0 16px; }
  .axis-labels { padding: 0 16px; }
  .chart { min-height: 250px; padding: 8px 10px 0; }
  .chart svg { height: 270px; }
  .chart-detail { margin: 0 16px; font-size: 10px; }
  .market-balance { margin-top: 8px; }
  footer > span:nth-child(2) { font-size: 10px; }
}