/* ============================================================
   AurumX AI — Step 9 Live Market / MT5-style terminal
   ============================================================ */

.market-terminal {
   position: relative;
   min-height: 520px;
   overflow: hidden
}

.market-terminal::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: radial-gradient(circle at 70% 0%, rgba(43, 145, 255, .055), transparent 31%)
}

.market-topbar {
   position: relative;
   z-index: 3;
   display: flex;
   align-items: center;
   gap: 8px;
   min-height: 45px;
   padding: 8px 10px;
   border-bottom: 1px solid rgba(123, 173, 224, .09);
   background: rgba(4, 13, 22, .40)
}

.market-symbol-select {
   height: 31px;
   min-width: 112px;
   padding: 0 28px 0 9px;
   border: 1px solid rgba(90, 164, 228, .14);
   border-radius: 8px;
   background: #071521;
   color: #edf7ff;
   font: 700 11px inherit;
   outline: none;
   cursor: pointer
}

.market-symbol-select:focus {
   border-color: rgba(72, 174, 255, .36)
}

.market-timeframes {
   display: flex;
   align-items: center;
   gap: 3px;
   flex-wrap: wrap
}

.market-tf {
   height: 29px;
   min-width: 35px;
   padding: 0 8px;
   border: 1px solid transparent;
   border-radius: 7px;
   background: transparent;
   color: #72899f;
   font-size: 10px;
   font-weight: 760;
   cursor: pointer;
   transition: .16s ease
}

.market-tf:hover {
   color: #d9edff;
   background: rgba(49, 145, 231, .06)
}

.market-tf.active {
   color: #eef9ff;
   border-color: rgba(75, 171, 255, .17);
   background: rgba(46, 157, 255, .10);
   box-shadow: inset 0 0 0 1px rgba(46, 157, 255, .03)
}

.market-feed {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 6px;
   min-height: 29px;
   padding: 0 9px;
   border: 1px solid rgba(94, 155, 211, .11);
   border-radius: 999px;
   background: rgba(5, 17, 29, .65);
   color: #6f8498;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .65px;
   white-space: nowrap
}

.market-feed::before {
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #f1b84b;
   box-shadow: 0 0 10px rgba(241, 184, 75, .30)
}

.market-feed.mt5 {
   color: #76e8b6;
   border-color: rgba(43, 217, 157, .15);
   background: rgba(43, 217, 157, .045)
}

.market-feed.mt5::before {
   background: #2bd99d;
   box-shadow: 0 0 10px rgba(43, 217, 157, .40)
}

.market-quote-strip {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   gap: 15px;
   min-height: 48px;
   padding: 6px 11px;
   border-bottom: 1px solid rgba(123, 173, 224, .07);
   overflow-x: auto;
   scrollbar-width: none
}

.market-quote-strip::-webkit-scrollbar {
   display: none
}

.market-stat {
   flex: 0 0 auto;
   display: grid;
   gap: 1px;
   min-width: 52px
}

.market-stat small {
   font-size: 12px;
   letter-spacing: .55px;
   text-transform: uppercase;
   color: #566f86
}

.market-stat strong {
   font-size: 11px;
   color: #b9cad8;
   white-space: nowrap
}

.market-stat.price strong {
   font-size: 17px;
   color: #f1f6fa;
   letter-spacing: -.25px
}

.market-stat.bid strong {
   color: #77caff
}

.market-stat.ask strong {
   color: #f2c66b
}

.market-stat.ohlc {
   display: flex;
   align-items: center;
   gap: 9px;
   min-width: max-content
}

.market-stat.ohlc span {
   display: flex;
   gap: 3px;
   font-size: 10px;
   color: #71869a
}

.market-stat.ohlc b {
   color: #a9bac9;
   font-weight: 650
}

.market-chart-shell {
   position: relative;
   height: 410px;
   min-height: 410px;
   background: linear-gradient(180deg, rgba(2, 9, 16, .16), rgba(2, 8, 14, .44))
}

#marketChart {
   position: absolute;
   inset: 0
}

.market-watermark {
   position: absolute;
   left: 16px;
   top: 14px;
   z-index: 2;
   pointer-events: none;
   display: flex;
   align-items: baseline;
   gap: 8px;
   opacity: .72
}

.market-watermark strong {
   font-size: 20px;
   letter-spacing: -.4px
}

.market-watermark span {
   color: #627b91;
   font-size: 10px
}

.market-state {
   position: absolute;
   inset: 0;
   z-index: 6;
   display: none;
   place-items: center;
   text-align: center;
   padding: 20px;
   background: rgba(2, 8, 14, .58);
   backdrop-filter: blur(4px)
}

.market-state.show {
   display: grid
}

.market-state b {
   font-size: 13px
}

.market-state span {
   display: block;
   margin-top: 4px;
   color: #71869a;
   font-size: 10px;
   max-width: 340px;
   line-height: 1.5
}

.market-attribution {
   position: absolute;
   right: 8px;
   bottom: 5px;
   z-index: 4;
   font-size: 12px;
   color: #40586e;
   opacity: .72
}

.market-attribution a {
   color: #526f89
}

.market-footer {
   position: relative;
   z-index: 2;
   min-height: 31px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding: 5px 10px;
   border-top: 1px solid rgba(123, 173, 224, .07);
   color: #536d84;
   font-size: 9px
}

.market-live-note {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.market-refresh {
   white-space: nowrap
}

.watchlist-live {
   padding: 0 !important;
   overflow: hidden
}

.watchlist-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 13px 10px;
   border-bottom: 1px solid rgba(123, 173, 224, .08)
}

.watchlist-head b {
   font-size: 12px
}

.watchlist-head span {
   font-size: 13px;
   color: #59748c
}

.watchlist-body {
   display: grid
}

.watch-live-row {
   appearance: none;
   width: 100%;
   min-height: 44px;
   display: grid;
   grid-template-columns: minmax(62px, 1fr) auto 64px;
   align-items: center;
   gap: 7px;
   padding: 0 12px;
   border: 0;
   border-bottom: 1px solid rgba(255, 255, 255, .035);
   background: transparent;
   color: inherit;
   text-align: left;
   cursor: pointer;
   transition: .14s ease
}

.watch-live-row:last-child {
   border-bottom: 0
}

.watch-live-row:hover,
.watch-live-row.active {
   background: rgba(46, 157, 255, .055)
}

.watch-live-row.active {
   box-shadow: inset 2px 0 #2e9dff
}

.watch-symbol {
   display: grid
}

.watch-symbol strong {
   font-size: 10px;
   color: #c6d5e2
}

.watch-symbol small {
   font-size: 12px;
   color: #526c83
}

.watch-price {
   font-size: 10px;
   font-weight: 720;
   color: #b6c5d2;
   font-variant-numeric: tabular-nums;
   white-space: nowrap
}

.watch-change {
   text-align: right;
   font-size: 13px;
   font-weight: 740;
   white-space: nowrap;
   color: #697f93
}

.watch-change.up {
   color: #4dd9a2
}

.watch-change.down {
   color: #ff7780
}

@media(max-width:1050px) {
   .dashboard-v3 .dashboard-grid {
      grid-template-columns: 1fr
   }

   .watchlist-live {
      min-height: unset
   }

   .watchlist-body {
      grid-template-columns: 1fr 1fr
   }

   .watch-live-row:nth-child(odd) {
      border-right: 1px solid rgba(255, 255, 255, .035)
   }
}

@media(max-width:680px) {
   .market-topbar {
      align-items: flex-start;
      flex-wrap: wrap
   }

   .market-feed {
      margin-left: 0
   }

   .market-timeframes {
      order: 3;
      width: 100%
   }

   .market-chart-shell {
      height: 350px;
      min-height: 350px
   }

   .market-quote-strip {
      gap: 12px
   }

   .watchlist-body {
      grid-template-columns: 1fr
   }

   .watch-live-row:nth-child(odd) {
      border-right: 0
   }

   .market-footer {
      align-items: flex-start;
      flex-direction: column
   }

   .market-live-note {
      white-space: normal
   }
}