/* Shared surface system. This file is deliberately loaded last so legacy
   modules retain their layout while their outer cards share one visual language. */
:root {
  --surface-fill: color-mix(in srgb, var(--card) 96%, #05090d 4%);
  --surface-fill-strong: color-mix(in srgb, var(--card) 91%, #111b23 9%);
  --surface-frame-a: #77e2d0;
  --surface-frame-b: #5597f0;
  --surface-frame-c: #475872;
  --surface-shadow: 0 18px 44px rgb(0 0 0 / 20%), 0 1px 0 rgb(255 255 255 / 3%) inset;
}

:root[data-theme="light"] {
  --surface-fill: #fff;
  --surface-fill-strong: #fbfdfd;
  --surface-frame-a: #179a88;
  --surface-frame-b: #4d7ed4;
  --surface-frame-c: #b7c8d1;
  --surface-shadow: 0 14px 34px rgb(26 47 61 / 9%), 0 1px 0 rgb(255 255 255 / 92%) inset;
}

/* Primary product surfaces only. Small statistic cells keep their quieter
   border so that a section boundary remains easier to scan than a metric. */
:where(
  .card,
  .hero-panel,
  .form-card,
  .compound-card,
  .history-section,
  .chart-section,
  .beta-diagnostics,
  .forecast-lab,
  .fib-research,
  .apex-next-research,
  .wave-research,
  .market-brief,
  .history-guide,
  .okx-customer-shell,
  .market-guide,
  .workspace-compact-card,
  .watchlist
) {
  --surface-a: var(--surface-frame-a);
  --surface-b: var(--surface-frame-b);
  --surface-c: var(--surface-frame-c);
  position: relative;
  /* Cards retain a calm structural border. Their distinct identity is carried
     by the short gradient on top, not by a luminous frame on every edge. */
  border: 1px solid color-mix(in srgb, var(--line) 84%, var(--surface-a) 16%) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(90deg, var(--surface-a), var(--surface-b) 64%, transparent) 20px 0 / calc(100% - 40px) 2px no-repeat,
    linear-gradient(145deg, color-mix(in srgb, var(--surface-fill-strong) 97%, var(--surface-a) 3%), var(--surface-fill) 48%) !important;
  box-shadow: 0 12px 30px rgb(0 0 0 / 16%), 0 1px 0 rgb(255 255 255 / 3%) inset !important;
}

/* Each area keeps a distinct but restrained accent: cyan for execution,
   violet for research, lime for model health, and amber for market context. */
#workspace :is(.market-brief, .history-guide, .market-guide) {
  --surface-a: #67c7f0;
  --surface-b: #7186e8;
  --surface-c: #365e70;
}
#workspace :is(.okx-customer-shell, .workspace-compact-card) {
  --surface-a: #63e3ca;
  --surface-b: #4a93e9;
  --surface-c: #31545b;
}
.market-overview, .watchlist, .leaders-grid .card, .home-coin {
  --surface-a: #e7bf74;
  --surface-b: #de7e9b;
  --surface-c: #705436;
}
.pricing-grid .card, .stats .card:nth-child(3n + 2), .two-columns > .card:nth-child(2n) {
  --surface-a: #bc95ff;
  --surface-b: #6f89ee;
  --surface-c: #514575;
}
.stats .card:nth-child(3n), .leaders-grid .card:nth-child(3n), .home-coin:nth-child(3n) {
  --surface-a: #8cdda5;
  --surface-b: #42b98f;
  --surface-c: #386b60;
}
.beta-container :is(.forecast-lab, .compound-card, .fib-research, .apex-next-research, .wave-research) {
  --surface-a: var(--research-frame-a, #91c5ff);
  --surface-b: var(--research-frame-b, #667eea);
  --surface-c: var(--research-frame-c, #405875);
}
.beta-container #tmisCard { --surface-a: #9ce6ad; --surface-b: #4ab995; --surface-c: #3f715f; }
.beta-container #apexIntelCard, .beta-container #apexCard, .beta-container #apexNextResearch { --surface-a: #c7a7ff; --surface-b: #8867e8; --surface-c: #55447b; }
.beta-container #fibResearch, .beta-container .wave-research { --surface-a: #98b7ff; --surface-b: #617de0; --surface-c: #435480; }

/* Information inside a card is visually quieter than its outer boundary. */
:where(.card, .compound-card, .market-brief, .history-guide, .workspace-compact-card) > .panel-heading,
:where(.card, .compound-card, .market-brief, .history-guide, .workspace-compact-card) > .card-header-line:first-child {
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, var(--surface-a) 20%);
}

:where(.card, .compound-card, .history-section, .chart-section, .market-brief, .market-guide) :is(.stat-box, .metric-box, .metric-card, .summary-card) {
  background: color-mix(in srgb, var(--field) 82%, var(--surface-a) 4%);
  border-color: color-mix(in srgb, var(--line) 84%, var(--surface-a) 16%);
}

/* This is a disclosure wrapper, not a content card. Its children provide the
   actual surfaces, so framing the wrapper creates a tall empty panel. */
#workspace .workspace-diagnostics {
  position: static;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The period comparison is a genuine card and may host a fixed-position note. */
#workspace .market-guide { overflow: visible; }

@media (max-width: 700px) {
  :where(
    .card,
    .hero-panel,
    .form-card,
    .compound-card,
    .history-section,
    .chart-section,
    .beta-diagnostics,
    .forecast-lab,
    .fib-research,
    .apex-next-research,
    .wave-research,
    .market-brief,
    .history-guide,
    .okx-customer-shell,
    .market-guide,
    .workspace-compact-card,
    .watchlist
  ) { border-radius: 16px !important; }
}