/* FX Tej-inspired modern preview skin.
 * Preview-only presentation layer: no trade, journal, account or sync logic is changed.
 */
:root {
  --fx-bg: #080b10;
  --fx-bg-soft: #0d1117;
  --fx-surface: #111720;
  --fx-surface-raised: #151d28;
  --fx-surface-deep: #0b1016;
  --fx-line: rgba(173, 187, 207, .16);
  --fx-line-strong: rgba(211, 190, 111, .34);
  --fx-text: #f4f6fa;
  --fx-muted: #9aa5b6;
  --fx-dim: #697589;
  --fx-gold: #d7b85b;
  --fx-gold-bright: #f0d477;
  --fx-red: #ff5d63;
  --fx-green: #38c982;
  --fx-blue: #72a8ff;
  --fx-radius: 16px;
}

/* Keep preview navigation and anchor movement calm without hijacking the
 * browser's native wheel/trackpad scrolling. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body[data-fxtej-modern="true"] {
  -webkit-overflow-scrolling: touch;
}

/* Hero cursor treatment: a restrained gold halo, ring and particle trail
 * matching the FX Tej Community interaction style. The controller lives in
 * fxtej-modern.js and is only enabled on the preview hero. */
body[data-fxtej-modern="true"] [data-fxtej-cursor="true"] {
  cursor: default;
}

body[data-fxtej-modern="true"] .pft-cursor-ring,
body[data-fxtej-modern="true"] .pft-cursor-core,
body[data-fxtej-modern="true"] .pft-cursor-particle {
  pointer-events: none !important;
}

body[data-fxtej-modern="true"] .pft-hero-cursor-aura {
  display: none !important;
}

body[data-fxtej-modern="true"] .pft-cursor-ring {
  width: 46px !important;
  height: 46px !important;
  z-index: 120 !important;
  border-color: rgba(244, 230, 196, .52) !important;
  box-shadow: none !important;
  transition: left 120ms cubic-bezier(.22,1,.36,1), top 120ms cubic-bezier(.22,1,.36,1), width 360ms cubic-bezier(.22,1,.36,1), height 360ms cubic-bezier(.22,1,.36,1), margin 360ms cubic-bezier(.22,1,.36,1), opacity 180ms ease, border-color 360ms ease !important;
}

body[data-fxtej-modern="true"] .pft-cursor-ring--big {
  width: 92px !important;
  height: 92px !important;
  border-color: rgba(240, 212, 119, .88) !important;
  box-shadow: inset 0 0 18px rgba(240, 212, 119, .12), 0 0 26px rgba(240, 212, 119, .24) !important;
}

body[data-fxtej-modern="true"] .pft-cursor-core {
  width: 6px !important;
  height: 6px !important;
  z-index: 121 !important;
  background: #f4e6c4 !important;
  box-shadow: 0 0 10px rgba(244, 230, 196, .68) !important;
  transition: left 46ms cubic-bezier(.22,1,.36,1), top 46ms cubic-bezier(.22,1,.36,1), opacity 160ms ease !important;
}

body[data-fxtej-modern="true"] .pft-cursor-particle {
  width: 5px !important;
  height: 5px !important;
  background: var(--fx-gold-bright) !important;
  box-shadow: 0 0 16px rgba(240, 212, 119, .72) !important;
}

@media (max-width: 720px), (pointer: coarse) {
  body[data-fxtej-modern="true"] .pft-hero-cursor-aura,
  body[data-fxtej-modern="true"] .pft-cursor-ring,
  body[data-fxtej-modern="true"] .pft-cursor-core,
  body[data-fxtej-modern="true"] .pft-cursor-particle {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-fxtej-modern="true"] .pft-hero-cursor-aura,
  body[data-fxtej-modern="true"] .pft-cursor-ring,
  body[data-fxtej-modern="true"] .pft-cursor-core,
  body[data-fxtej-modern="true"] .pft-cursor-particle {
    display: none !important;
  }
}

/* Neutral graphite replaces the old green cast in dark mode. */
body:not(:has(#hero)):not(.pft-force-light) {
  background:
    radial-gradient(900px 420px at 68% -160px, rgba(215, 184, 91, .11), transparent 68%),
    radial-gradient(650px 420px at 2% 90%, rgba(93, 129, 184, .07), transparent 68%),
    var(--fx-bg) !important;
  color: var(--fx-text) !important;
}

body:not(:has(#hero)):not(.pft-force-light) #root,
body:not(:has(#hero)):not(.pft-force-light) #root > div,
body:not(:has(#hero)):not(.pft-force-light) .pft-main {
  background: transparent !important;
  color: var(--fx-text) !important;
}

body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar {
  width: 236px !important;
  background: rgba(9, 13, 19, .94) !important;
  border-color: var(--fx-line) !important;
  box-shadow: 12px 0 48px rgba(0, 0, 0, .16) !important;
  backdrop-filter: blur(18px);
}

body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar > div:first-child {
  height: 72px !important;
  min-height: 72px !important;
  padding-inline: 22px !important;
  border-bottom-color: var(--fx-line) !important;
}

body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar .pft-brand-wordmark,
body:not(:has(#hero)):not(.pft-force-light) .pft-topbar .pft-brand-wordmark {
  filter: drop-shadow(0 5px 16px rgba(215, 184, 91, .10));
}

body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [data-pft-side-section="MAIN"] {
  color: var(--fx-dim) !important;
  padding-inline: 20px !important;
}

body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [aria-label],
body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [data-pft-side-group],
body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [data-pft-side-active],
body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar .pft-native-settings {
  min-height: 48px !important;
  margin: 4px 12px !important;
  padding-inline: 16px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--fx-muted) !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease !important;
}

body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [aria-label]:hover,
body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [data-pft-side-group]:hover,
body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [data-pft-side-active]:hover,
body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar .pft-native-settings:hover {
  background: rgba(215, 184, 91, .08) !important;
  border-color: rgba(215, 184, 91, .24) !important;
  color: var(--fx-gold-bright) !important;
  transform: translateX(2px);
}

body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [data-pft-side-active="true"],
body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [aria-current="page"],
body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [data-active="true"],
body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [aria-label="Dashboard"] {
  background: linear-gradient(90deg, rgba(215, 184, 91, .20), rgba(215, 184, 91, .07)) !important;
  border-color: var(--fx-line-strong) !important;
  color: var(--fx-text) !important;
  box-shadow: inset 3px 0 0 var(--fx-gold), 0 8px 24px rgba(215, 184, 91, .08) !important;
}

body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [data-pft-side-active="true"] svg,
body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [aria-current="page"] svg,
body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [data-active="true"] svg,
body:not(:has(#hero)):not(.pft-force-light) .pft-sidebar [aria-label="Dashboard"] svg {
  color: var(--fx-gold-bright) !important;
}

/* Desktop chrome: quiet, sticky and clearly separated from the data canvas. */
@media (min-width: 721px) {
  body:not(:has(#hero)):not(.pft-force-light) .pft-desktop-toolbar {
    left: 240px !important;
    height: 72px !important;
    padding-inline: 24px !important;
    background: rgba(8, 11, 16, .80) !important;
    border-bottom-color: var(--fx-line) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18) !important;
    backdrop-filter: blur(18px);
  }

  body:not(:has(#hero)):not(.pft-force-light) .pft-desktop-toolbar > div:first-child {
    left: 28px !important;
    right: 370px !important;
  }

  body:not(:has(#hero)):not(.pft-force-light) .pft-desktop-toolbar > div:first-child > div:first-child {
    color: var(--fx-text) !important;
    font-size: 16px !important;
    letter-spacing: -.025em !important;
  }

  body:not(:has(#hero)):not(.pft-force-light) .pft-desktop-toolbar > div:first-child > div:last-child {
    color: var(--fx-dim) !important;
  }
}

body:not(:has(#hero)):not(.pft-force-light) .pft-main {
  padding-top: 96px !important;
  padding-right: clamp(18px, 3vw, 48px) !important;
  padding-left: clamp(18px, 3vw, 48px) !important;
  padding-bottom: 56px !important;
}

body:not(:has(#hero)):not(.pft-force-light) .pft-workspace-switch {
  z-index: 96 !important;
  padding: 4px !important;
  background: rgba(17, 23, 32, .90) !important;
  border: 1px solid rgba(211, 190, 111, .22) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .26), 0 0 28px rgba(215, 184, 91, .09) !important;
  backdrop-filter: blur(16px);
}

body:not(:has(#hero)):not(.pft-force-light) .pft-workspace-switch button {
  min-height: 38px !important;
  padding: 0 18px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--fx-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease !important;
}

body:not(:has(#hero)):not(.pft-force-light) .pft-workspace-switch button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--fx-gold-bright), var(--fx-gold)) !important;
  color: #16130c !important;
  box-shadow: 0 0 0 1px rgba(240, 212, 119, .30), 0 5px 20px rgba(215, 184, 91, .22) !important;
}

body:not(:has(#hero)):not(.pft-force-light) .pft-workspace-switch button[aria-pressed="true"]::after {
  background: rgba(22, 19, 12, .48) !important;
  bottom: 3px !important;
}

/* Summary strip: the first visual anchor on Dashboard. */
body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box {
  margin-bottom: 24px !important;
}

body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-content,
body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-top,
body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-bottom-metrics {
  background: transparent !important;
}

body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-content {
  gap: 12px !important;
}

body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-top,
body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-bottom-metrics {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--fx-line) !important;
  border-radius: var(--fx-radius) !important;
  background: linear-gradient(135deg, rgba(20, 27, 38, .92), rgba(12, 17, 24, .90)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16) !important;
}

body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-top::before,
body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-bottom-metrics::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px 120px at 4% 0%, rgba(215, 184, 91, .10), transparent 70%);
}

body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-top {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr) !important;
}

body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-top-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-bottom-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-metric,
body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-net {
  position: relative !important;
  z-index: 1 !important;
  min-height: 126px !important;
  padding: 24px 22px !important;
  background: transparent !important;
  border-color: var(--fx-line) !important;
}

body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-label {
  color: var(--fx-dim) !important;
  letter-spacing: .16em !important;
  font-size: 10px !important;
}

body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-value,
body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-net-value {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.05em !important;
}

body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-net-value {
  font-size: clamp(34px, 4.2vw, 58px) !important;
  color: var(--fx-red) !important;
}

body:not(:has(#hero)):not(.pft-force-light) #pft-account-summary-box .pft-summary-value {
  font-size: clamp(24px, 2.7vw, 38px) !important;
}

/* Charts, calendars and lower cards share one visual language. */
body:not(:has(#hero)):not(.pft-force-light) :is(.journal-card, .pft-card, .fx-card, .ap-card, .journal-editor-card, .analysis-group, .analysis-details, [data-chartrow] > div, [data-statgrid] > div) {
  border: 1px solid var(--fx-line) !important;
  border-radius: var(--fx-radius) !important;
  background: linear-gradient(145deg, rgba(18, 25, 35, .94), rgba(12, 17, 24, .94)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .14) !important;
}

body:not(:has(#hero)):not(.pft-force-light) :is(.journal-card, .pft-card, .fx-card, .ap-card, .journal-editor-card, .analysis-group, .analysis-details) :is(h1, h2, h3, h4, strong) {
  color: var(--fx-text) !important;
}

body:not(:has(#hero)):not(.pft-force-light) :is(.journal-dashboard-designed, .analysis-designed, .pft-journal-workspace) :is(input, textarea, select, summary, button, [role="button"]) {
  border-radius: 10px !important;
}

body:not(:has(#hero)):not(.pft-force-light) :is(input, textarea, select, summary) {
  background: var(--fx-surface-raised) !important;
  color: var(--fx-text) !important;
  border-color: var(--fx-line) !important;
}

body:not(:has(#hero)):not(.pft-force-light) :is(input, textarea, select, summary):focus,
body:not(:has(#hero)):not(.pft-force-light) :is(input, textarea, select, summary):focus-visible {
  outline: 2px solid rgba(215, 184, 91, .28) !important;
  border-color: var(--fx-gold) !important;
}

body:not(:has(#hero)):not(.pft-force-light) :is(button, [role="button"]):not(:disabled):hover {
  border-color: rgba(215, 184, 91, .44) !important;
  color: var(--fx-gold-bright) !important;
  box-shadow: 0 5px 18px rgba(215, 184, 91, .10) !important;
}

body:not(:has(#hero)):not(.pft-force-light) :is(.fx-periods, .analysis-filter-bar, .ap-analysis-controls, [data-filterrow]) {
  gap: 8px !important;
}

body:not(:has(#hero)):not(.pft-force-light) :is(.fx-periods button[aria-pressed="true"], .fx-periods button.active, .analysis-designed .active, .analysis-designed [aria-pressed="true"], .analysis-designed [aria-selected="true"]) {
  background: var(--fx-gold) !important;
  border-color: var(--fx-gold-bright) !important;
  color: #15130e !important;
  box-shadow: 0 5px 18px rgba(215, 184, 91, .18) !important;
}

/* Journal and Trades: more visual hierarchy without changing the workflow. */
body:not(:has(#hero)):not(.pft-force-light) .pft-journal-workspace :is(.journal-sidebar, .journal-list, .journal-detail, .journal-panel) {
  border-color: var(--fx-line) !important;
  border-radius: var(--fx-radius) !important;
  background: linear-gradient(145deg, rgba(18, 25, 35, .94), rgba(12, 17, 24, .94)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .14) !important;
}

body:not(:has(#hero)):not(.pft-force-light) .pft-journal-workspace :is(.journal-list-item, .journal-trade-item, .journal-entry) {
  margin: 5px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

body:not(:has(#hero)):not(.pft-force-light) .pft-journal-workspace :is(.journal-list-item, .journal-trade-item, .journal-entry):hover,
body:not(:has(#hero)):not(.pft-force-light) .pft-journal-workspace :is(.journal-list-item, .journal-trade-item, .journal-entry).active,
body:not(:has(#hero)):not(.pft-force-light) .pft-journal-workspace :is(.journal-list-item, .journal-trade-item, .journal-entry)[aria-selected="true"] {
  background: rgba(215, 184, 91, .10) !important;
  border-color: rgba(215, 184, 91, .36) !important;
  transform: translateX(2px);
}

body:not(:has(#hero)):not(.pft-force-light) :is(.journal-table, table) {
  overflow: hidden !important;
  border: 1px solid var(--fx-line) !important;
  border-radius: var(--fx-radius) !important;
  background: var(--fx-surface) !important;
}

body:not(:has(#hero)):not(.pft-force-light) :is(.journal-table th, table th) {
  background: rgba(21, 29, 40, .92) !important;
  color: var(--fx-dim) !important;
  letter-spacing: .14em !important;
}

body:not(:has(#hero)):not(.pft-force-light) :is(.journal-table td, table td) {
  border-color: var(--fx-line) !important;
}

/* Light mode keeps the same hierarchy and gold focus without the graphite wash. */
body.pft-force-light:not(:has(#hero)) {
  background: #f4f7fb !important;
  color: #182231 !important;
}

body.pft-force-light:not(:has(#hero)) #root,
body.pft-force-light:not(:has(#hero)) #root > div,
body.pft-force-light:not(:has(#hero)) .pft-main {
  background: #f4f7fb !important;
  color: #182231 !important;
}

body.pft-force-light:not(:has(#hero)) .pft-sidebar,
body.pft-force-light:not(:has(#hero)) .pft-desktop-toolbar {
  background: rgba(255, 255, 255, .88) !important;
  border-color: #dbe2ec !important;
  box-shadow: 0 12px 34px rgba(30, 43, 61, .07) !important;
  backdrop-filter: blur(18px);
}

body.pft-force-light:not(:has(#hero)) .pft-workspace-switch {
  background: rgba(255, 255, 255, .90) !important;
  border-color: #dbe2ec !important;
  box-shadow: 0 12px 30px rgba(30, 43, 61, .10) !important;
}

body.pft-force-light:not(:has(#hero)) .pft-workspace-switch button[aria-pressed="true"] {
  background: var(--fx-gold) !important;
  color: #15130e !important;
  box-shadow: 0 5px 18px rgba(161, 126, 25, .20) !important;
}

body.pft-force-light:not(:has(#hero)) :is(.journal-card, .pft-card, .fx-card, .ap-card, .journal-editor-card, .analysis-group, .analysis-details, [data-chartrow] > div, [data-statgrid] > div) {
  background: #ffffff !important;
  border-color: #dbe2ec !important;
  box-shadow: 0 14px 34px rgba(30, 43, 61, .06) !important;
}

@media (max-width: 900px) {
  body:not(:has(#hero)) .pft-sidebar { width: 208px !important; }
  body:not(:has(#hero)) .pft-main { padding-inline: 18px !important; }
  body:not(:has(#hero)) #pft-account-summary-box .pft-summary-top { grid-template-columns: 1fr !important; }
  body:not(:has(#hero)) #pft-account-summary-box .pft-summary-top-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 720px) {
  body:not(:has(#hero)) .pft-main { padding: 78px 14px 82px !important; }
  body:not(:has(#hero)) .pft-workspace-switch { max-width: calc(100vw - 94px) !important; }
  body:not(:has(#hero)) .pft-workspace-switch button { padding-inline: 12px !important; font-size: 11px !important; }
  body:not(:has(#hero)) #pft-account-summary-box .pft-summary-top-metrics,
  body:not(:has(#hero)) #pft-account-summary-box .pft-summary-bottom-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body:not(:has(#hero)) #pft-account-summary-box .pft-summary-metric,
  body:not(:has(#hero)) #pft-account-summary-box .pft-summary-net { min-height: 112px !important; padding: 18px 16px !important; }
  body:not(:has(#hero)) #pft-account-summary-box .pft-summary-net-value { font-size: 38px !important; }
  body:not(:has(#hero)) :is(.journal-dashboard-designed, .analysis-designed, .pft-journal-workspace) :is(.journal-card, .pft-card, .fx-card, .ap-card, .journal-editor-card, .analysis-group, .analysis-details) { border-radius: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(:has(#hero)) *,
  body:not(:has(#hero)) *::before,
  body:not(:has(#hero)) *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}