.dt-heatmap-tile { align-content: space-between; background: color-mix(in srgb, var(--dt-heatmap-tone, var(--dt-color-brand)) calc(20% + var(--dt-heatmap-strength, 50) * .55%), #101214); border: 1px solid color-mix(in srgb, var(--dt-heatmap-tone, var(--dt-color-brand)) 58%, #ffffff); border-radius: var(--dt-radius-sm); color: #fff; cursor: pointer; display: grid; gap: 1rem; min-height: 8rem; padding: .875rem; text-align: left; width: min(13rem, calc(100vw - 2rem)); }
.dt-heatmap-tile:hover { box-shadow: none; transform: none; }
.dt-heatmap-tile:focus-visible { box-shadow: 0 0 0 3px var(--dt-color-focus); outline: none; }
.dt-heatmap-tile__head, .dt-heatmap-tile__foot { align-items: center; display: flex; gap: .5rem; justify-content: space-between; }
.dt-heatmap-tile__head strong { font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); }
.dt-heatmap-tile__head span { color: rgba(255,255,255,.72); font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); text-transform: none; }
.dt-heatmap-tile__identity { align-items: center; display: inline-flex; gap: .5rem; }
.dt-heatmap-tile__identity .dt-asset-logo { background: rgba(255,255,255,.95); border-color: rgba(255,255,255,.7); box-shadow: none; }
.dt-heatmap-tile__identity strong { color: #fff; }
.dt-heatmap-tile__value { font: var(--dt-weight-semibold) 1.35rem/1 var(--dt-font-compact); font-variant-numeric: tabular-nums; }
.dt-heatmap-tile__foot { color: rgba(255,255,255,.78); font-size: var(--dt-text-sm); }
.dt-heatmap-tile__foot b { color: #fff; font-size: var(--dt-text-sm); }

.dt-sparkline { color: var(--dt-color-brand); display: block; height: var(--dt-sparkline-height, 3.5rem); overflow: visible; width: var(--dt-sparkline-width, 10rem); }
.dt-sparkline__area { fill: color-mix(in srgb, currentColor 14%, transparent); }
.dt-sparkline__line { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.dt-sparkline__dot { fill: var(--dt-color-surface); stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.dt-sparkline.is-negative { color: var(--dt-color-danger); }

.dt-market-ticker { align-items: center; background: var(--dt-color-surface); border: 1px solid var(--dt-color-border); border-radius: var(--dt-radius-sm); color: var(--dt-color-text); display: inline-flex; font-variant-numeric: tabular-nums; gap: .6rem; min-height: 2.25rem; padding: .5rem .75rem; }
.dt-market-ticker strong { font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); letter-spacing: 0; }
.dt-market-ticker span { font: var(--dt-weight-medium) var(--dt-text-sm) var(--dt-font-compact); }
.dt-market-ticker b { font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); }
.dt-market-ticker.is-positive b { color: var(--dt-color-success); }
.dt-market-ticker.is-negative b { color: #f1797f; }
.dt-market-ticker.is-neutral b { color: #aeb5ad; }

.dt-search-result { align-items: center; background: var(--dt-color-surface); border-bottom: 1px solid var(--dt-color-border); color: var(--dt-color-text); display: grid; gap: .75rem; grid-template-columns: auto minmax(0,1fr) auto; min-height: 4rem; padding: .75rem; text-decoration: none; width: min(34rem, calc(100vw - 2rem)); }
.dt-search-result:hover, .dt-search-result:focus-visible { background: var(--dt-color-surface-muted); }
.dt-search-result:focus-visible { box-shadow: inset 0 0 0 2px var(--dt-color-brand); outline: none; }
.dt-search-result__mark { align-items: center; background: color-mix(in srgb, var(--dt-color-brand) 10%, var(--dt-color-surface)); border-radius: 50%; color: var(--dt-color-brand); display: inline-flex; font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); height: 2.25rem; justify-content: center; width: 2.25rem; }
.dt-search-result__copy { display: grid; gap: .15rem; min-width: 0; }
.dt-search-result__copy strong { font-size: var(--dt-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-search-result__copy small { color: var(--dt-color-text-muted); font-size: var(--dt-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-search-result__meta { display: grid; gap: .2rem; text-align: right; }
.dt-search-result__meta strong { font-size: var(--dt-text-xs); }
.dt-search-result__meta small { color: var(--dt-color-brand); font: var(--dt-weight-semibold) var(--dt-text-xs) var(--dt-font-compact); }

.dt-choice-option { align-items: center; background: var(--dt-color-surface); border: 1px solid var(--dt-color-border); border-radius: var(--dt-radius-lg); color: var(--dt-color-text); cursor: pointer; display: grid; gap: .75rem; grid-template-columns: 2.25rem minmax(0,1fr) 1.25rem; min-height: 4.25rem; padding: .75rem; text-align: left; width: min(28rem, calc(100vw - 2rem)); }
.dt-choice-option:hover { border-color: var(--dt-color-border-strong); }
.dt-choice-option[aria-pressed='true'] { background: color-mix(in srgb, var(--dt-color-brand) 7%, var(--dt-color-surface)); border-color: var(--dt-color-brand); }
.dt-choice-option:focus-visible { box-shadow: 0 0 0 3px var(--dt-color-focus); outline: none; }
.dt-choice-option__icon { align-items: center; background: var(--dt-color-surface-muted); border-radius: var(--dt-radius-sm); color: var(--dt-color-brand); display: inline-flex; font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); height: 2.25rem; justify-content: center; }
.dt-choice-option__copy { display: grid; gap: .2rem; }
.dt-choice-option__copy strong { font-size: var(--dt-text-sm); }
.dt-choice-option__copy small { color: var(--dt-color-text-muted); font-size: var(--dt-text-sm); line-height: 1.4; }
.dt-choice-option__check { color: var(--dt-color-brand); font-weight: var(--dt-weight-semibold); opacity: 0; }
.dt-choice-option[aria-pressed='true'] .dt-choice-option__check { opacity: 1; }

.dt-selection-bar { align-items: center; background: color-mix(in srgb, var(--dt-color-brand) 7%, var(--dt-color-surface)); border: 1px solid color-mix(in srgb, var(--dt-color-brand) 28%, var(--dt-color-border)); border-radius: var(--dt-radius-lg); display: flex; gap: .75rem; justify-content: space-between; min-height: 3.75rem; padding: .5rem .75rem; width: min(56rem, calc(100vw - 2rem)); }
.dt-selection-bar__copy { align-items: center; display: flex; gap: .6rem; }
.dt-selection-bar__copy b { align-items: center; background: var(--dt-color-brand); border-radius: 999px; color: var(--dt-color-on-brand); display: inline-flex; font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); height: 1.6rem; justify-content: center; min-width: 1.6rem; padding: 0 .35rem; }
.dt-selection-bar__copy span { color: var(--dt-color-text); font-size: var(--dt-text-sm); font-weight: var(--dt-weight-semibold); }
.dt-selection-bar__actions { align-items: center; display: flex; gap: .5rem; }
.dt-selection-bar__actions .dt-button > svg { fill: none; flex: 0 0 auto; height: 1rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1rem; }

.dt-sync-status { background: var(--dt-color-surface); border: 1px solid var(--dt-color-border); border-radius: var(--dt-radius-lg); display: grid; gap: .9rem; padding: 1rem; width: min(30rem, calc(100vw - 2rem)); }
.dt-sync-status__head { align-items: start; display: flex; gap: 1rem; justify-content: space-between; }
.dt-sync-status__identity { align-items: center; display: flex; gap: .75rem; min-width: 0; }
.dt-sync-status__identity > div { display: grid; gap: .25rem; min-width: 0; }
.dt-sync-status__head strong { font-size: var(--dt-text-md); }
.dt-sync-status__head small { color: var(--dt-color-text-muted); font-size: var(--dt-text-sm); line-height: 1.45; }
.dt-sync-status__head span { color: var(--dt-color-brand); font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); white-space: nowrap; }
.dt-sync-status .dt-progress { width: 100%; }

.dt-insight-item { border-bottom: 1px solid var(--dt-color-border); color: var(--dt-color-text); display: grid; gap: .3rem; padding: 1rem 1rem 1rem 2.1rem; position: relative; width: min(30rem, calc(100vw - 2rem)); }
.dt-insight-item::before { background: var(--dt-insight-tone, var(--dt-color-text-muted)); border-radius: 50%; content: ''; height: .5rem; left: .85rem; position: absolute; top: 1.25rem; width: .5rem; }
.dt-insight-item span { color: var(--dt-color-text-muted); font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); letter-spacing: 0; text-transform: none; }
.dt-insight-item strong { font-size: var(--dt-text-sm); line-height: 1.4; }
.dt-insight-item small { color: var(--dt-color-text-muted); font-size: var(--dt-text-sm); line-height: 1.45; }

.dt-radar-chart { color: var(--dt-color-brand); display: grid; gap: .75rem; justify-items: center; width: 100%; margin: 0; min-width: 0; }
.dt-radar-chart svg { height: 280px; width: 100%; }
.dt-radar-chart__grid { fill: none; stroke: var(--dt-color-border); stroke-width: 1; }
.dt-radar-chart__axis { stroke: var(--dt-color-border); stroke-width: 1; }
.dt-radar-chart__shape { fill: color-mix(in srgb, currentColor 18%, transparent); stroke: currentColor; stroke-linejoin: round; stroke-width: 2.5; }
.dt-radar-chart__dot { fill: var(--dt-color-surface); stroke: currentColor; stroke-width: 2; }
.dt-radar-chart text { fill: var(--dt-color-text-muted); font: var(--dt-weight-semibold) 11px var(--dt-font-compact); }
.dt-radar-chart figcaption { color: var(--dt-color-text-muted); font-size: var(--dt-text-sm); }

.dt-leaderboard-card { align-items: center; background: var(--dt-color-surface); border: 1px solid var(--dt-color-border); border-radius: var(--dt-radius-lg); color: var(--dt-color-text); display: grid; gap: .75rem; grid-template-columns: auto auto minmax(0,1fr) auto; min-height: 4.75rem; padding: .75rem; width: min(28rem, calc(100vw - 2rem)); }
.dt-leaderboard-card__rank { color: var(--dt-color-text-muted); font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); }
.dt-leaderboard-card__identity { display: grid; gap: .2rem; }
.dt-leaderboard-card__identity strong { font-size: var(--dt-text-sm); }
.dt-leaderboard-card__identity small { color: var(--dt-color-text-muted); font-size: var(--dt-text-sm); }
.dt-leaderboard-card__result { display: grid; gap: .2rem; text-align: right; }
.dt-leaderboard-card__result strong { font: var(--dt-weight-semibold) var(--dt-text-md) var(--dt-font-compact); }
.dt-leaderboard-card__result small { color: var(--dt-color-brand); font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); }

@media (max-width: 38rem) { .dt-selection-bar { align-items: stretch; flex-direction: column; } .dt-selection-bar__actions { flex-wrap: wrap; } .dt-search-result { grid-template-columns: auto minmax(0,1fr); } .dt-search-result__meta { grid-column: 2; text-align: left; } }

@media (max-width: 34rem) {
  .dt-selection-bar__actions { display: grid; grid-template-columns: 1fr; }
  .dt-selection-bar__actions > * { width: 100%; }
  .dt-sync-status__head { align-items: flex-start; flex-direction: column; }
  .dt-leaderboard-card { align-items: start; grid-template-columns: auto auto minmax(0,1fr); }
  .dt-leaderboard-card__result { grid-column: 3; justify-items: start; text-align: left; }
  .dt-choice-option { grid-template-columns: 2.25rem minmax(0,1fr); }
  .dt-choice-option__indicator { grid-column: 2; }
  .dt-heatmap-tile { min-width: 0; width: 100%; }
  .dt-market-ticker { flex-wrap: wrap; justify-content: center; }
}

.dt-radar-chart :is(line, polygon, circle) { vector-effect: non-scaling-stroke; }
.dt-radar-chart__legend { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding-left: 24px; font-size: 12px; }
.dt-sparkline { max-width: 100%; }
