/* Trading terminal refinement: polished instrument chrome, luminous price action,
   and restrained depth. All chart data remains an explicitly simulated example. */
.terminal {
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(155deg, #14213b 0%, #0c1529 52%, #0a1223 100%);
  border: 1px solid rgba(136, 160, 220, .28);
  border-radius: 22px;
  box-shadow: 0 55px 100px rgba(11, 24, 63, .31),
              0 16px 40px rgba(57, 72, 143, .18),
              inset 0 1px 0 rgba(255, 255, 255, .10);
}
.terminal::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at 92% -10%, rgba(94, 120, 240, .18), transparent 43%);
  pointer-events: none;
}
.terminal::after {
  content: "";
  position: absolute;
  inset: 0 16px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(165, 190, 255, .34), transparent);
  pointer-events: none;
}
.terminal-topbar {
  height: 52px;
  border-bottom: 1px solid rgba(135, 160, 218, .12);
  background: rgba(15, 26, 48, .74);
}
.terminal-symbol {
  background: linear-gradient(140deg, #6d80ff, #3e50c8);
  box-shadow: 0 3px 13px rgba(70, 94, 235, .38), inset 0 1px 0 rgba(255,255,255,.22);
}
.terminal-brand small { color: #8f9ec1; font-weight: 500; }
.terminal-right { color: #a6b6d0; letter-spacing: .12em; }
.terminal-dot { background: #61dec7; box-shadow: 0 0 0 3px rgba(85, 218, 194, .09), 0 0 14px rgba(85, 218, 194, .65); }
.terminal-body { padding-top: 17px; background: linear-gradient(180deg, rgba(27, 41, 71, .28), rgba(11, 22, 43, 0) 55%); }
.asset-head { padding-bottom: 5px; }
.asset-icon {
  background: linear-gradient(145deg, rgba(91,115,178,.32), rgba(59,79,126,.15));
  color: #e5ecff;
  border: 1px solid rgba(142, 166, 221, .15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.asset-caption { color: #7e93ba; letter-spacing: .17em; }
.asset-name { letter-spacing: -.025em; color: #f4f7ff; }
.market-quote strong { color: #f8faff; font-family: 'Space Grotesk', Manrope, sans-serif; }
.demo-pill {
  color: #b1c2e7;
  background: rgba(91, 112, 174, .16);
  border: 1px solid rgba(119, 144, 212, .20);
  letter-spacing: .13em;
}
.asset-tabs {
  width: max-content;
  margin-top: 16px;
  padding: 3px;
  gap: 2px;
  border: 1px solid rgba(118, 145, 202, .17);
  background: rgba(8, 17, 34, .55);
  border-radius: 10px;
}
.asset-tabs button { padding: 8px 13px; color: #8195b5; border-radius: 7px; transition: color .2s, background .2s; }
.asset-tabs button.active,.asset-tabs button:hover {
  color: #edf4ff;
  background: linear-gradient(135deg, rgba(94, 117, 185, .42), rgba(55, 75, 126, .36));
  border-color: rgba(127, 155, 215, .26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075);
}
.chart-toolbar {
  padding: 12px 0 10px;
  margin-top: 12px;
  border-block-color: rgba(131, 157, 211, .13);
}
.timeframe-group { gap: 2px; }
.timeframe-group button,.indicator-toggle { color: #8094b7; border-radius: 6px; font-size: 8.5px; padding: 7px 9px; }
.timeframe-group button.active,.timeframe-group button:hover {
  color: #e4edff;
  background: rgba(94, 119, 189, .33);
  box-shadow: inset 0 0 0 1px rgba(137,164,224,.15);
}
.indicator-toggle.active { color: #d3bbff; }
.indicator-toggle:hover { background: rgba(82, 103, 167, .21); }
.chart-wrap {
  height: 296px;
  margin: 9px -5px 0;
  border: 1px solid rgba(120, 145, 201, .13);
  border-radius: 13px;
  background:
    radial-gradient(ellipse at 79% 39%, rgba(54, 96, 143, .22), transparent 62%),
    radial-gradient(ellipse at 15% 96%, rgba(71, 80, 150, .13), transparent 58%),
    linear-gradient(180deg, #101d34 0%, #0c182d 60%, #0a162a 100%);
  box-shadow: inset 0 1px 12px rgba(4, 10, 24, .25), 0 12px 30px rgba(4, 11, 25, .11);
}
.chart-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107,133,180,.13), transparent);
  pointer-events: none;
}
.chart-top-values { top: 13px; left: 16px; right: 82px; font-size: 9px; color: #8da3c8; letter-spacing: .025em; }
.chart-top-values .ohlc-up { color: #65d7c5; }
.chart-top-values .ohlc-down { color: #ef91a1; }
#chart-ma-label { display: flex; align-items: center; gap: 12px; letter-spacing: .01em; }
#chart-ma-label[hidden] { display: none; }
#chart-ma-label .ma-fast { color: #e9cb98; }
#chart-ma-label .ma-slow { color: #9baaff; }
#chart-average { filter: drop-shadow(0 0 3px rgba(230,198,147,.19)); }
#chart-average-long { filter: drop-shadow(0 0 2px rgba(155,169,255,.15)); }
#chart-price-line circle:first-of-type { transform-box: fill-box; transform-origin: center; animation: marker-pulse 3.5s ease-in-out infinite; }
@keyframes marker-pulse { 0%,100% { opacity: .08; transform: scale(.83); } 50% { opacity: .26; transform: scale(1.22); } }
.chart-watermark {
  top: 46px;
  right: 78px;
  font-size: 10px;
  color: rgba(154, 172, 220, .085);
  letter-spacing: .24em;
}
.chart-tooltip {
  top: 40px;
  background: rgba(24, 38, 63, .94);
  border: 1px solid rgba(143, 167, 224, .32);
  border-radius: 9px;
  padding: 9px 12px;
  color: #f1f5ff;
  font-size: 10px;
  box-shadow: 0 12px 25px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
}
.terminal-bottom {
  padding-top: 11px;
  border-top: 0;
  color: #8094b6;
}
.terminal-bottom i { background: #54d5bd; box-shadow: 0 0 0 3px rgba(84,213,189,.1), 0 0 12px rgba(84,213,189,.2); }
@media (max-width: 760px) {
  .terminal { border-radius: 16px; }
  .terminal-topbar { height: 42px; }
  .terminal-body { padding-top: 10px; }
  .asset-tabs { margin-top: 8px; padding: 2px; }
  .asset-tabs button { padding: 6px 8px; }
  .chart-toolbar { padding: 7px 0; margin-top: 7px; }
  .timeframe-group button,.indicator-toggle { padding: 6px; font-size: 7px; }
  .chart-wrap { height: 235px; margin-top: 5px; border-radius: 9px; }
  .chart-top-values { top: 9px; left: 9px; right: 49px; font-size: 7px; }
}
@media (max-width: 430px) {
  .chart-wrap { height: 204px; margin-inline: -3px; }
  .chart-top-values { font-size: 6px; right: 23px; }
  .asset-tabs button { padding: 5px 6px; }
  .timeframe-group button,.indicator-toggle { font-size: 6.5px; padding: 5px 5.5px; }
  .chart-watermark { right: 55px; font-size: 7px; }
  .terminal-bottom { padding-top: 7px; }
  #chart-ma-label { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #chart-price-line circle:first-of-type { animation: none; }
}