:root{--bg0:#090e17;--bg1:#101925;--bg2:#141f30;--bg3:#1a273a;--bg4:#1c293b;--t1:#f3f2ec;--t2:#aab8cb;--t3:#8d9db3;--gold:#c4ac77;--gold2:#e4d0a0;--gold3:#f5e8c3;--bd:#acc0dc24;--bd2:#acc0dc3d;--grad-premium:linear-gradient(120deg,#eddcb3,#ccb580)}body.page-home,body.page-pro,body.page-special,body.page-scalping,body.page-login{background:radial-gradient(at 90% 0,#2f436126,#0000 45%),#090e17!important}.page-home .card,.page-pro .card,.page-special .card,.page-login .login-card{background:linear-gradient(145deg,#152031,#101925)!important;border-color:#2c394d!important;box-shadow:0 12px 32px #0002!important}.page-home .sidebar,.page-pro #left-panel,.page-pro #right-panel,.page-special #left-panel,.page-special #right-panel{background:#0e1723!important}.page-home .topbar,.page-pro #topbar,.page-special #topbar,.page-scalping #scalpTopbar{background:#0d1521!important;border-color:#273449!important}.page-home .news-hero-banner{background:radial-gradient(at 0 0,#33445c66,#0000 70%),linear-gradient(135deg,#1b2738,#111925)!important}.page-home .news-stat-card{background:#141f2e!important}.page-home .btn-primary,.page-login .btn-primary{background:var(--grad-premium)!important;color:#1c2533!important;box-shadow:none!important}.page-login .login-card{border-radius:24px!important;padding:32px!important}.page-login input,.page-login select{min-height:44px;background:#0c1522!important;border-color:#344158!important;border-radius:10px!important}.page-pro .mobile-bottom-nav,.page-special .mobile-bottom-nav,.page-scalping .mobile-bottom-nav,.page-pro .fss-more-panel,.page-special .fss-more-panel,.page-scalping .fss-more-panel{background:#121c2b!important;border-color:#344155!important}@media (width<=600px){.page-login .login-card{padding:26px 20px!important}}


/* ══ TOPBAR SINGLE-ROW LUXURY WORKSPACE HEADER ══ */
.page-pro #topbar.workspace-header,
.page-special #topbar.workspace-header,
.site-system #app #topbar.workspace-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 16px !important;
  gap: 12px !important;
  background: rgba(13, 21, 34, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Quick Navigation on Top Left (or Start) */
.workspace-header .experience-quicknav {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.workspace-header .experience-quicknav a,
.workspace-header .experience-quicknav button {
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  height: 32px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Hide legacy timeframes container from header */
.workspace-header .workspace-timeframes {
  display: none !important;
}

/* Controls & Quotes on Top Right (or End) */
.workspace-header .tb-group-controls {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  order: 2 !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.workspace-header .tb-group-main {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  order: 3 !important;
  margin: 0 !important;
}

.workspace-header .tb-price {
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 10px !important;
}

/* ══ CENTERED TIMEFRAMES IN CHART BANNER ══ */
.vip-chart-banner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 18px !important;
  min-height: 48px !important;
  background: rgba(16, 25, 37, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.vip-chart-center-timeframes {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 !important;
  margin: 0 16px !important;
}

.vip-chart-center-timeframes .tf-pills {
  display: inline-flex !important;
  gap: 4px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  padding: 4px 6px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.vip-chart-center-timeframes .tf-pill {
  background: transparent !important;
  color: var(--t2, #94a3b8) !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.vip-chart-center-timeframes .tf-pill:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.vip-chart-center-timeframes .tf-pill.active {
  background: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.45) !important;
}


/* ══ PRO TERMINAL PERFECT LAYOUT ══ */
.page-pro #app {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  grid-template-rows: 52px minmax(0, 1fr) !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: #090e17 !important;
}

/* Ensure Chart Area takes column 1 and fills height */
.page-pro #chart-area {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-height: 0 !important;
  height: 100% !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: #090e17 !important;
  overflow: hidden !important;
}

/* Ensure Inspector takes column 2 */
.page-pro #terminal-inspector {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: #0d1522 !important;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

.page-pro #terminal-inspector :is(#left-panel, #right-panel) {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 14px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
}

/* Inspector tabs */
.page-pro .experience-inspector-tabs {
  display: flex !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(13, 21, 34, 0.95) !important;
}

.page-pro .experience-inspector-tabs button {
  flex: 1 !important;
  padding: 10px 14px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--t2, #94a3b8) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.page-pro .experience-inspector-tabs button[aria-selected="true"] {
  color: #fff !important;
  border-bottom-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

/* Centered Timeframe Pills on Chart */
:is(.page-pro, .page-special) .chart-tf-wrapper {
  display: flex !important;
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 60 !important;
  pointer-events: auto !important;
  align-items: center !important;
}

:is(.page-pro, .page-special) .chart-tf-wrapper .tf-pills {
  display: inline-flex !important;
  gap: 4px !important;
  background: rgba(13, 21, 34, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 4px 6px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

:is(.page-pro, .page-special) .chart-tf-wrapper .tf-pill {
  background: transparent !important;
  color: #94a3b8 !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 11px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

:is(.page-pro, .page-special) .chart-tf-wrapper .tf-pill:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

:is(.page-pro, .page-special) .chart-tf-wrapper .tf-pill.active {
  background: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.45) !important;
}

/* Indicators toolbar below chart */
.page-pro .experience-indicator-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: rgba(13, 21, 34, 0.95) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 11.5px !important;
}

.page-pro .experience-indicator-tabs button {
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.page-pro .experience-indicator-tabs button[aria-pressed="true"] {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}


/* ══ SCALPING LUXURY SINGLE-ROW HEADER & TIMEFRAMES ══ */
.page-scalping #scalpApp #scalpTopbar,
.page-scalping #scalpTopbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 16px !important;
  gap: 12px !important;
  background: rgba(13, 21, 34, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  z-index: 30 !important;
}

/* Quick Navigation on Top Left (or Start) */
.page-scalping .experience-quicknav {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Controls container on Top Right (or End) */
.page-scalping .scalp-feed-controls {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  order: 2 !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.page-scalping .scalp-mobile-symbol {
  display: inline-flex !important;
  order: 2 !important;
  height: 34px !important;
  min-height: 34px !important;
  background: rgba(20, 31, 48, 0.85) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.page-scalping #scalpProvider {
  height: 34px !important;
  min-height: 34px !important;
  min-width: 170px !important;
  max-width: 220px !important;
  background: rgba(20, 31, 48, 0.85) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.page-scalping #scalpRefresh {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  background: rgba(20, 31, 48, 0.85) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.page-scalping #scalpRefresh:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.page-scalping #currentPriceTopbar {
  order: 3 !important;
  font-size: 19px !important;
  font-family: var(--mono) !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* ══ CENTERED TIMEFRAMES ON SCALPING CHART ══ */
.page-scalping #chartArea {
  position: relative !important;
}

.page-scalping #tfSelector {
  display: inline-flex !important;
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 25 !important;
  gap: 4px !important;
  background: rgba(13, 21, 34, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 4px 6px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.page-scalping #tfSelector .tf-btn {
  background: transparent !important;
  color: #94a3b8 !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.page-scalping #tfSelector .tf-btn:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.page-scalping #tfSelector .tf-btn.active {
  background: #00c853 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(0, 200, 83, 0.45) !important;
}


/* ══ SCALPING MASTER SINGLE-ROW LAYOUT & TIMEFRAMES ══ */
.page-scalping #scalpApp #scalpTopbar,
.page-scalping #scalpTopbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 16px !important;
  gap: 12px !important;
  background: rgba(13, 21, 34, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  z-index: 30 !important;
}

/* Quick Navigation on Top Left (or Start) */
.page-scalping .experience-quicknav {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Right Controls (Symbol, Provider, Refresh, Price) */
.page-scalping .scalp-feed-controls {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  order: 2 !important;
  margin: 0 !important;
  margin-right: auto !important;
}

.page-scalping .scalp-mobile-symbol {
  display: inline-flex !important;
  order: 2 !important;
  height: 34px !important;
  min-height: 34px !important;
  width: auto !important;
  min-width: 110px !important;
  background: rgba(20, 31, 48, 0.85) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.page-scalping #scalpProvider {
  height: 34px !important;
  min-height: 34px !important;
  width: auto !important;
  min-width: 175px !important;
  background: rgba(20, 31, 48, 0.85) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.page-scalping #scalpRefresh {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  background: rgba(20, 31, 48, 0.85) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.page-scalping #scalpRefresh:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.page-scalping #currentPriceTopbar {
  order: 3 !important;
  font-size: 19px !important;
  font-family: var(--mono) !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* ══ FLOATING TIMEFRAMES CENTERED ON SCALPING CHART ══ */
.page-scalping #chartArea {
  position: relative !important;
}

.page-scalping #chartArea #tfSelector,
.page-scalping #tfSelector {
  display: inline-flex !important;
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 60 !important;
  gap: 4px !important;
  background: rgba(13, 21, 34, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 4px 6px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.page-scalping #tfSelector .tf-btn {
  background: transparent !important;
  color: #94a3b8 !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.page-scalping #tfSelector .tf-btn:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.page-scalping #tfSelector .tf-btn.active {
  background: #00c853 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(0, 200, 83, 0.45) !important;
}

/* LTR fixes on English mode */
html[lang="en"] .page-scalping,
body.page-scalping[data-lang="en"] {
  direction: ltr !important;
}
html[lang="en"] .page-scalping #statusBar,
body.page-scalping[data-lang="en"] #statusBar {
  direction: ltr !important;
}



/* ══════════════════════════════════════════════════════════════════════
   PERFECT TERMINAL TWO-COLUMN LAYOUT & INSPECTOR TAB CONTROLS
   ══════════════════════════════════════════════════════════════════════ */
.site-system:is(.page-special, .page-pro) #app,
body.site-system #app {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  grid-template-rows: 52px minmax(0, 1fr) !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100vw !important;
  overflow: hidden !important;
  background: #090e17 !important;
}

.site-system:is(.page-special, .page-pro) #topbar,
body.site-system #topbar {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

.site-system:is(.page-special, .page-pro) #chart-area,
body.site-system #chart-area {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.site-system:is(.page-special, .page-pro) #terminal-inspector,
body.site-system #terminal-inspector {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: #0d1522 !important;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  z-index: 20 !important;
}

/* Inspector Tabs Bar */
.experience-inspector-tabs {
  display: flex !important;
  width: 100% !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(13, 17, 23, 0.98) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

.experience-inspector-tabs button {
  flex: 1 !important;
  padding: 10px 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: #94a3b8 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: center !important;
  font-family: var(--sans) !important;
}

.experience-inspector-tabs button:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.experience-inspector-tabs button[aria-selected="true"] {
  color: #fff !important;
  border-bottom: 2px solid #dc2626 !important;
  background: rgba(220, 38, 38, 0.08) !important;
}

/* ── Panel Toggling for VIP Page (.page-special) ── */
.page-special #terminal-inspector[data-panel="summary"] #right-panel { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 12px !important; }
.page-special #terminal-inspector[data-panel="summary"] #left-panel { display: none !important; }
.page-special #terminal-inspector[data-panel="context"] #left-panel { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 12px !important; }
.page-special #terminal-inspector[data-panel="context"] #right-panel { display: none !important; }

/* ── Panel Toggling for PRO Page (.page-pro) ── */
.page-pro #terminal-inspector[data-panel="summary"] #left-panel { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 12px !important; }
.page-pro #terminal-inspector[data-panel="summary"] #right-panel { display: none !important; }
.page-pro #terminal-inspector[data-panel="context"] #right-panel { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 12px !important; }
.page-pro #terminal-inspector[data-panel="context"] #left-panel { display: none !important; }