/* Account overview: one balance focal point, then quick account and market reads. */
.overview-view {
  max-width: 1380px;
  padding-top: clamp(22px, 3vw, 40px);
}

.overview-view .secondary-heading {
  align-items: center;
  margin-bottom: clamp(24px, 3vw, 38px);
}

.overview-view .secondary-heading h1 {
  font-size: clamp(32px, 4.2vw, 46px);
  letter-spacing: -.055em;
}

.overview-view .secondary-heading p {
  color: var(--text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-copy);
}

.overview-view .secondary-action {
  min-height: 42px;
  padding: 0 16px;
  border-color: var(--border-control);
  border-radius: var(--radius-control);
  background: var(--button-bg);
  color: var(--button-text);
  font-size: var(--font-size-small);
  box-shadow: var(--shadow-panel);
}

.overview-summary {
  grid-template-columns: minmax(0, 2.1fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.overview-summary .summary-card {
  min-width: 0;
  min-height: 150px;
  align-content: space-between;
  gap: var(--space-3);
  padding: clamp(16px, 1.7vw, 23px);
  border: var(--border-width) solid var(--terminal-panel-border);
  border-radius: var(--terminal-panel-radius);
  background: var(--terminal-panel-surface);
  box-shadow: var(--terminal-panel-shadow);
}

.overview-summary .summary-card span {
  color: var(--text-secondary);
  font-size: var(--font-size-caption);
  letter-spacing: var(--letter-spacing-label);
}

.overview-summary .summary-card strong {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: var(--font-weight-medium);
  letter-spacing: -.055em;
}

.overview-summary .summary-card small {
  color: var(--text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.4;
}

.overview-summary .summary-card:first-child {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  border-color: color-mix(in srgb, var(--green) 32%, var(--line));
  background:
    radial-gradient(ellipse at 90% 10%, color-mix(in srgb, var(--green) 16%, transparent), transparent 43%),
    linear-gradient(125deg, var(--terminal-selected-surface), var(--terminal-panel-surface) 72%);
}

.overview-summary .summary-card:first-child::after {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 80px;
  height: 32px;
  border-right: 1px solid color-mix(in srgb, var(--green) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--green) 50%, transparent);
  border-radius: 0 0 32px 0;
  content: "";
  opacity: .55;
  pointer-events: none;
  transform: skewY(-18deg);
}

.overview-summary .summary-card:first-child strong {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: var(--font-weight-semibold);
}

.overview-columns {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr);
  gap: var(--space-4);
}

.overview-market-panel,
.overview-recent-panel {
  border: var(--border-width) solid var(--terminal-panel-border);
  border-radius: var(--terminal-panel-radius);
  background: var(--terminal-panel-surface);
  box-shadow: var(--terminal-panel-shadow);
}

.overview-market-panel .table-heading,
.overview-recent-panel .table-heading {
  align-items: center;
  padding: 20px 20px 16px;
}

.overview-market-panel .table-heading h2,
.overview-recent-panel .table-heading h2 {
  margin-top: 6px;
  font-size: var(--font-size-title);
}

.overview-market-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); padding: 0 18px 18px; }

.overview-asset {
  min-height: 112px;
  padding: 13px;
  border-color: var(--line);
  border-radius: var(--radius-card);
  background: var(--terminal-control-surface);
}

.overview-asset-name strong { font-size: var(--font-size-small); }
.overview-asset-name small { font-size: var(--font-size-caption); }
.overview-change { font-size: var(--font-size-caption); }
.overview-asset-bottom > strong { font-size: var(--font-size-small); }
.overview-asset-bottom svg { width: 34px; height: 22px; }
.overview-asset .coin-icon { width: 32px; height: 32px; }

.overview-recent-list { padding: 0 20px 16px; }
.overview-trade { min-height: 66px; }
.overview-trade-main strong,
.overview-trade > strong:last-child { font-size: var(--font-size-small); }
.overview-trade-main small { font-size: var(--font-size-caption); }
.overview-trade > .coin-icon { width: 32px; height: 32px; }
.overview-empty { min-height: 225px; padding: 18px; }
.overview-empty strong { font-size: var(--font-size-body); }
.overview-empty small { font-size: var(--font-size-small); }
.overview-empty .secondary-action { margin-top: 6px; }
.overview-view .quiet-note { margin-top: 18px; color: var(--text-secondary); }

@media (max-width: 950px) and (min-width: 761px) {
  .overview-columns { grid-template-columns: 1fr; }
  .overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-summary .summary-card:first-child { grid-column: 1 / -1; }
  .overview-summary .summary-card:last-child { grid-column: 1 / -1; }
  .overview-market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .overview-view { padding-top: 18px; }
  .overview-view .secondary-heading { align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  .overview-view .secondary-heading h1 { margin-top: 5px; font-size: 30px; }
  .overview-view .secondary-heading p { max-width: 250px; font-size: var(--font-size-small); }
  .overview-view .secondary-action { flex: none; min-height: 38px; padding: 0 10px; font-size: var(--font-size-caption); }
  .overview-action-long { display: none; }
  .overview-action-short { display: inline; }
  .overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
  .overview-summary .summary-card { min-height: 108px; gap: 8px; padding: 13px; }
  .overview-summary .summary-card:first-child { grid-column: 1 / -1; min-height: 142px; }
  .overview-summary .summary-card:last-child {
    grid-column: 1 / -1;
    min-height: 84px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    gap: 4px 12px;
  }
  .overview-summary .summary-card:last-child span { flex: 1 1 auto; }
  .overview-summary .summary-card:last-child strong { flex: 0 0 auto; }
  .overview-summary .summary-card:last-child small { flex: 1 0 100%; }
  .overview-summary .summary-card span { font-size: var(--font-size-micro); }
  .overview-summary .summary-card strong { font-size: 20px; }
  .overview-summary .summary-card:first-child strong { font-size: 34px; }
  .overview-summary .summary-card small { font-size: var(--font-size-caption); }
  .overview-summary .summary-card:first-child::after { right: 15px; bottom: 15px; }
  .overview-columns { grid-template-columns: 1fr; gap: var(--space-3); }
  .overview-market-panel .table-heading,
  .overview-recent-panel .table-heading { padding: 16px 14px 13px; }
  .overview-market-panel .table-heading h2,
  .overview-recent-panel .table-heading h2 { font-size: var(--font-size-body); }
  .overview-market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 12px 13px; }
  .overview-asset { min-height: 100px; padding: 10px; }
  .overview-asset .coin-icon { width: 29px; height: 29px; }
  .overview-asset-bottom { margin-top: 10px; }
  .overview-asset-bottom > strong { font-size: var(--font-size-small); }
  .overview-asset-bottom svg { width: 42px; height: 22px; }
  .overview-empty { min-height: 178px; }
}

@media (max-width: 375px) {
  .overview-asset-bottom svg { display: none; }
}