/* =========================================================
   ASHMARKETS GLASSMORPHISM — CORRECTED OVERRIDE
   Target: supplied generated reference image
   IMPORTANT: this version contains REAL CSS syntax.
   No escaped colons/backslashes.
   ========================================================= */

/* ---------------------------------------------------------
   0. OVERRIDE EXISTING DARK THEME VARIABLES
   --------------------------------------------------------- */
:root {
  --bg: #0F0F0F !important;
  --bg-base: #0F0F0F !important;
  --bg-deep: #0A0A0A !important;
  --bg-navy: #171717 !important;

  --panel: rgba(48, 48, 48, 0.54) !important;
  --panel-bg: rgba(48, 48, 48, 0.54) !important;
  --card-bg: rgba(45, 45, 45, 0.58) !important;

  --border: rgba(210, 210, 210, 0.20) !important;
  --border-subtle: rgba(210, 210, 210, 0.14) !important;

  --brand-primary: #20e3b2 !important;
  --brand-bright: #34f5c5 !important;
  --brand-muted: #179d89 !important;

  --success: #28e7a0 !important;
  --danger: #ff5268 !important;
  --warning: #f5b82e !important;

  --text-primary: #f2f7fa !important;
  --text-secondary: #a9bdc9 !important;
  --text-muted: #718b9a !important;

  color-scheme: dark;
}

/* ---------------------------------------------------------
   1. PAGE / ATMOSPHERE

   The target image is NOT black.
   It is a dark blue/navy environment with teal/steel fog.
   --------------------------------------------------------- */
html {
  min-height: 100%;
  background: #0A0A0A !important;
}

body {
  min-height: 100%;
  margin: 0;

  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif !important;

  color: #f2f7fa !important;

  background:
    radial-gradient(
      ellipse 62% 48% at 22% 18%,
      rgba(31, 196, 166, 0.21) 0%,
      rgba(24, 142, 137, 0.12) 35%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 66% 52% at 72% 18%,
      rgba(139, 139, 139, 0.25) 0%,
      rgba(101, 101, 101, 0.13) 39%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 68% 60% at 74% 66%,
      rgba(127, 127, 127, 0.18) 0%,
      rgba(81, 81, 81, 0.10) 42%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 50% 54% at 24% 66%,
      rgba(20, 157, 141, 0.14) 0%,
      transparent 70%
    ),
    linear-gradient(
      135deg,
      #0A0A0A 0%,
      #0F0F0F 27%,
      #151515 62%,
      #171717 100%
    ) !important;

  background-attachment: fixed !important;
}

/* Kill existing opaque page backgrounds that mask the glass */
body .app,
body .app-shell,
body .layout,
body .shell,
body .main,
body .main-content,
body .content,
body .dashboard,
body .dashboard-page,
body .page,
body main {
  background-color: transparent !important;
}

/* Retire pre-existing ambient overlays */
body::before {
  display: none !important;
}

/* ---------------------------------------------------------
   2. OPTIONAL AMBIENT GLOW ELEMENTS
   --------------------------------------------------------- */
.glow {
  position: fixed !important;
  pointer-events: none !important;
  border-radius: 9999px !important;
  z-index: 0 !important;
  opacity: 1 !important;
}

.glow-teal {
  width: 620px !important;
  height: 620px !important;
  top: 2% !important;
  left: 13% !important;
  background: rgba(26, 210, 174, 0.13) !important;
  filter: blur(105px) !important;
}

.glow-blue {
  width: 660px !important;
  height: 660px !important;
  top: 25% !important;
  right: -5% !important;
  background: rgba(136, 136, 136, 0.14) !important;
  filter: blur(130px) !important;
}

.glow-teal2 {
  width: 520px !important;
  height: 520px !important;
  bottom: -15% !important;
  left: 28% !important;
  background: rgba(24, 187, 157, 0.09) !important;
  filter: blur(125px) !important;
}

.glow-steel {
  width: 900px !important;
  height: 560px !important;
  top: -10% !important;
  left: 41% !important;
  background: rgba(141, 141, 141, 0.10) !important;
  filter: blur(135px) !important;
}

/* ---------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------- */
body .page-title,
body .logo-text h1,
body .am-section-title,
body .am-symbol {
  font-family: "Syne", Inter, sans-serif !important;
}

body .page-title {
  color: #f7fafc !important;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.025) !important;
}

body .page-sub,
body .am-section-count,
body .am-sigid,
body .am-timestamp {
  color: #7c95a4 !important;
}

body .am-section-title {
  color: #f2f7fa !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------------
   4. TOP BAR
   --------------------------------------------------------- */
body .topbar {
  background:
    linear-gradient(
      180deg,
      rgba(32, 32, 32, 0.76) 0%,
      rgba(25, 25, 25, 0.62) 100%
    ) !important;

  backdrop-filter: blur(24px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%) !important;

  border-bottom: 1px solid rgba(208, 208, 208, 0.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 8px 28px rgba(0, 0, 0, 0.18) !important;
}

body .user-badge {
  background:
    linear-gradient(
      135deg,
      rgba(50, 50, 50, 0.56),
      rgba(34, 34, 34, 0.48)
    ) !important;

  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;

  border: 1px solid rgba(210, 210, 210, 0.17) !important;
  border-radius: 10px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 16px rgba(0, 0, 0, 0.14) !important;
}

body .logout-btn {
  background: rgba(28, 25, 35, 0.42) !important;
  color: #ff687a !important;

  border: 1px solid rgba(255, 83, 107, 0.38) !important;
  border-radius: 8px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 3px 12px rgba(0, 0, 0, 0.14) !important;
}

/* ---------------------------------------------------------
   5. SIDEBAR

   Target sidebar is lighter/bluer than original website,
   but still one of the darker panes.
   --------------------------------------------------------- */
body .sidebar {
  background:
    linear-gradient(
      180deg,
      rgba(34, 34, 34, 0.72) 0%,
      rgba(27, 27, 27, 0.65) 52%,
      rgba(28, 28, 28, 0.69) 100%
    ) !important;

  backdrop-filter: blur(26px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(130%) !important;

  border-right: 1px solid rgba(209, 209, 209, 0.15) !important;

  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.025),
    10px 0 32px rgba(0, 0, 0, 0.12) !important;
}

body .sidebar-label {
  color: #718996 !important;
}

body .sidebar-link {
  color: #a6bac6 !important;
  background: transparent !important;

  border: 1px solid transparent !important;
  border-radius: 10px !important;

  box-shadow: none !important;
}

body .sidebar-link:hover {
  color: #eef6f8 !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

body .sidebar-link.active {
  color: #dffff6 !important;

  background:
    linear-gradient(
      90deg,
      rgba(25, 161, 139, 0.29) 0%,
      rgba(18, 119, 111, 0.18) 100%
    ) !important;

  border: 1px solid rgba(39, 226, 183, 0.48) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 22px rgba(30, 226, 179, 0.035),
    0 0 18px rgba(25, 216, 170, 0.075) !important;
}

/* ---------------------------------------------------------
   6. TAB STRIP
   --------------------------------------------------------- */
body .am-tabs {
  background:
    linear-gradient(
      180deg,
      rgba(59, 59, 59, 0.64) 0%,
      rgba(44, 44, 44, 0.58) 100%
    ) !important;

  backdrop-filter: blur(22px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%) !important;

  border: 1px solid rgba(214, 214, 214, 0.19) !important;
  border-radius: 16px !important;

  padding: 7px !important;
  gap: 6px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 7px 25px rgba(0, 0, 0, 0.18) !important;
}

body .am-tab {
  color: #b1c2cc !important;
  background: transparent !important;

  border: 1px solid transparent !important;
  border-radius: 12px !important;
}

body .am-tab:hover {
  color: #f3f8fa !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

body .am-tab.active {
  color: #f6fffc !important;

  background:
    linear-gradient(
      135deg,
      rgba(49, 155, 137, 0.55) 0%,
      rgba(33, 116, 111, 0.43) 100%
    ) !important;

  border: 1px solid rgba(62, 234, 193, 0.50) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 25px rgba(82, 245, 207, 0.035),
    0 0 18px rgba(27, 219, 172, 0.09) !important;
}

body .am-tab.active::after {
  display: none !important;
}

body .am-tab-count {
  background: rgba(22, 22, 22, 0.48) !important;
  color: #b1c3cc !important;

  border: 1px solid rgba(187, 187, 187, 0.15) !important;
}

body .am-tab.active .am-tab-count {
  background: rgba(43, 190, 158, 0.30) !important;
  color: #cafff1 !important;

  border-color: rgba(78, 237, 197, 0.22) !important;

  font-weight: 700 !important;
}

/* ---------------------------------------------------------
   7. GENERIC LARGE GLASS PANELS
   --------------------------------------------------------- */
body .am-toolbar,
body .panel,
body .controls {
  background:
    linear-gradient(
      135deg,
      rgba(55, 55, 55, 0.58) 0%,
      rgba(41, 41, 41, 0.51) 55%,
      rgba(46, 46, 46, 0.55) 100%
    ) !important;

  backdrop-filter: blur(20px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;

  border: 1px solid rgba(211, 211, 211, 0.18) !important;
  border-radius: 16px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 8px 30px rgba(0, 0, 0, 0.20) !important;
}

/* ---------------------------------------------------------
   8. TRADE CARDS

   This is the biggest visual correction.
   Reference cards are noticeably LIGHTER / BLUER than
   the page behind them.
   --------------------------------------------------------- */
body .am-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  background:
    radial-gradient(
      ellipse 55% 85% at 89% 28%,
      rgba(123, 123, 123, 0.10) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 44% 90% at 12% 22%,
      rgba(31, 135, 128, 0.07) 0%,
      transparent 72%
    ),
    linear-gradient(
      135deg,
      rgba(60, 60, 60, 0.76) 0%,
      rgba(47, 47, 47, 0.68) 48%,
      rgba(54, 54, 54, 0.72) 100%
    ) !important;

  backdrop-filter: blur(24px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%) !important;

  border: 1px solid rgba(219, 219, 219, 0.34) !important;
  border-left: 1px solid rgba(219, 219, 219, 0.34) !important;

  border-radius: 16px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 12px 36px rgba(0, 0, 0, 0.24),
    0 0 32px rgba(134, 134, 134, 0.028) !important;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

/* reflective upper surface */
body .am-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;

  border-radius: inherit !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.055) 0%,
      rgba(255, 255, 255, 0.015) 23%,
      transparent 43%,
      transparent 72%,
      rgba(78, 210, 190, 0.015) 100%
    ) !important;
}

body .am-card:hover {
  transform: translateY(-1px) !important;

  border-color: rgba(226, 226, 226, 0.41) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.09),
    0 14px 40px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(28, 213, 171, 0.045) !important;
}

/* Do not replace the whole glass border with bright green */
body .am-card.status-active {
  border-color: rgba(73, 208, 179, 0.40) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.09),
    0 12px 36px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(24, 218, 171, 0.055) !important;
}

body .am-card.status-active::before {
  display: none !important;
}

/* Any old nested dark card surface must not obscure new glass */
body .am-card > .am-card-body,
body .am-card > .card-body,
body .am-card > .content,
body .am-card-content {
  background: transparent !important;
}

/* ---------------------------------------------------------
   9. METRIC CELLS

   Reference uses dark inset wells sitting INSIDE the
   lighter card.
   --------------------------------------------------------- */
body .am-cell {
  background:
    linear-gradient(
      145deg,
      rgba(23, 23, 23, 0.68) 0%,
      rgba(34, 34, 34, 0.54) 100%
    ) !important;

  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;

  border: 1px solid rgba(156, 156, 156, 0.28) !important;
  border-radius: 10px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -8px 18px rgba(0, 0, 0, 0.055) !important;
}

body .am-cell:not(.sl):not(.tp) {
  border-color: rgba(51, 167, 164, 0.31) !important;
}

body .am-cell.tp {
  background:
    linear-gradient(
      145deg,
      rgba(32, 32, 32, 0.62) 0%,
      rgba(33, 33, 33, 0.55) 100%
    ) !important;

  border-color: rgba(38, 193, 134, 0.34) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.032),
    inset 0 0 18px rgba(30, 214, 142, 0.018) !important;
}

body .am-cell.sl {
  background:
    linear-gradient(
      145deg,
      rgba(68, 25, 45, 0.45) 0%,
      rgba(35, 26, 44, 0.54) 100%
    ) !important;

  border-color: rgba(235, 67, 95, 0.43) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    inset 0 0 18px rgba(234, 60, 93, 0.018) !important;
}

body .am-cell-label,
body .am-cell-label span {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;

  color: #91a8b5 !important;
}

body .am-cell-value {
  color: #f3f8fa !important;
  font-weight: 650 !important;
}

body .am-cell.tp .am-cell-value {
  color: #35efa9 !important;
}

body .am-cell.sl .am-cell-value {
  color: #ff5a70 !important;
}

/* ---------------------------------------------------------
   10. PRIMARY BUTTON
   --------------------------------------------------------- */
body .am-action-btn.primary {
  color: #effffb !important;

  background:
    linear-gradient(
      135deg,
      rgba(66, 224, 188, 0.94) 0%,
      rgba(32, 177, 148, 0.91) 100%
    ) !important;

  border: 1px solid rgba(106, 255, 219, 0.58) !important;
  border-radius: 8px !important;

  text-shadow: 0 1px 2px rgba(0, 38, 30, 0.28) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 76, 59, 0.16),
    0 5px 16px rgba(21, 218, 168, 0.16) !important;
}

body .am-action-btn.primary:hover {
  filter: brightness(1.05) !important;
}

/* ---------------------------------------------------------
   11. SECONDARY ACTION BUTTONS
   --------------------------------------------------------- */
body .am-action-btn {
  color: #b6c5cd !important;

  background:
    linear-gradient(
      180deg,
      rgba(29, 29, 29, 0.58),
      rgba(21, 21, 21, 0.50)
    ) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  border: 1px solid rgba(180, 180, 180, 0.22) !important;
  border-radius: 6px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 2px 7px rgba(0, 0, 0, 0.12) !important;
}

body .am-action-btn:hover {
  color: #eef6f8 !important;
  background: rgba(38, 38, 38, 0.65) !important;
  border-color: rgba(196, 196, 196, 0.30) !important;
}

/* ---------------------------------------------------------
   12. CHIPS
   --------------------------------------------------------- */
body .am-chip {
  color: #b4c3cb !important;

  background: rgba(22, 22, 22, 0.54) !important;

  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;

  border: 1px solid rgba(172, 172, 172, 0.23) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

body .am-chip.active {
  color: #32e6b5 !important;
  background: rgba(26, 26, 26, 0.56) !important;

  border-color: rgba(31, 219, 170, 0.46) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 0 10px rgba(22, 218, 170, 0.035) !important;
}

/* Green action-state chip */
body .am-chip.tp,
body .am-chip.success,
body .am-chip[data-status="tp"],
body .am-chip[data-tone="green"] {
  color: #30e5ad !important;
  border-color: rgba(28, 211, 156, 0.42) !important;
}

/* Red action-state chip */
body .am-chip.sl,
body .am-chip.danger,
body .am-chip[data-status="sl"],
body .am-chip[data-tone="red"] {
  color: #ff6578 !important;
  border-color: rgba(255, 82, 105, 0.40) !important;
}

/* ---------------------------------------------------------
   13. STATUS / DIRECTION PILLS
   --------------------------------------------------------- */
body .am-status-pill {
  border-radius: 8px !important;
}

body .am-status-pill.am-status-pending {
  color: #ffc43d !important;

  background:
    linear-gradient(
      180deg,
      rgba(91, 67, 15, 0.29),
      rgba(55, 43, 15, 0.21)
    ) !important;

  border: 1px solid rgba(245, 184, 46, 0.53) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 13px rgba(245, 184, 46, 0.08) !important;
}

body .am-status-pill.am-status-active {
  color: #31e9b5 !important;
  background: rgba(29, 29, 29, 0.53) !important;
  border-color: rgba(29, 222, 172, 0.43) !important;
}

body .am-status-pill.am-status-sl {
  color: #ff6578 !important;
  background: rgba(45, 20, 31, 0.47) !important;
  border-color: rgba(255, 75, 98, 0.40) !important;
}

body .am-status-pill.am-status-tp {
  color: #2ce6a5 !important;
  background: rgba(5, 38, 35, 0.48) !important;
  border-color: rgba(28, 208, 139, 0.35) !important;
}

body .am-direction-buy {
  color: #2de6b3 !important;
  background: rgba(5, 40, 37, 0.48) !important;
  border: 1px solid rgba(25, 222, 169, 0.40) !important;
}

body .am-direction-sell {
  color: #ff6578 !important;
  background: rgba(47, 20, 31, 0.45) !important;
  border: 1px solid rgba(255, 75, 98, 0.39) !important;
}

/* ---------------------------------------------------------
   14. SUCCESS BANNER
   --------------------------------------------------------- */
body .success-banner,
body .alert-success,
body .login-success {
  color: #29e4b1 !important;

  background:
    linear-gradient(
      90deg,
      rgba(21, 119, 105, 0.32) 0%,
      rgba(58, 58, 58, 0.54) 100%
    ) !important;

  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;

  border: 1px solid rgba(67, 217, 182, 0.19) !important;
  border-radius: 12px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 5px 20px rgba(0, 0, 0, 0.13) !important;
}

/* ---------------------------------------------------------
   15. TOOLBAR / MARKET OVERVIEW AREA
   --------------------------------------------------------- */
body .am-toolbar {
  min-height: 64px;

  background:
    linear-gradient(
      135deg,
      rgba(52, 52, 52, 0.56),
      rgba(41, 41, 41, 0.52)
    ) !important;
}

/* ---------------------------------------------------------
   16. SCROLLBAR
   --------------------------------------------------------- */
body {
  scrollbar-color: rgba(139, 176, 190, 0.42) transparent;
}

body::-webkit-scrollbar {
  width: 9px;
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background: rgba(169, 169, 169, 0.36);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ---------------------------------------------------------
   17. REDUCE HARD BLACK SURFACES INSIDE DASHBOARD

   Existing theme uses #05080F and low-white-alpha panels.
   These selectors stop those backgrounds showing through
   inside the components we are restyling.
   --------------------------------------------------------- */
body .am-tabs *,
body .am-card *,
body .am-toolbar * {
  --bg: transparent;
}

/* Do not flatten the components whose backgrounds we
   explicitly set above. */
body .am-tabs,
body .am-card,
body .am-cell,
body .am-toolbar,
body .am-action-btn,
body .am-chip,
body .am-status-pill {
  background-clip: padding-box;
}

/* ---------------------------------------------------------
   18. MOBILE / LOWER GPU FALLBACK
   --------------------------------------------------------- */
@media (max-width: 900px) {
  body .sidebar {
    backdrop-filter: blur(20px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(125%) !important;
  }

  body .am-card {
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
  }

  body .am-tabs {
    backdrop-filter: blur(16px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
  }
}

/* ---------------------------------------------------------
   19. MOTION
   --------------------------------------------------------- */
.ambient-motion .glow-teal {
  animation: glass-drift-a 80s ease-in-out infinite alternate;
}

.ambient-motion .glow-blue {
  animation: glass-drift-b 95s ease-in-out infinite alternate;
}

.ambient-motion .glow-teal2 {
  animation: glass-drift-c 70s ease-in-out infinite alternate;
}

@keyframes glass-drift-a {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(70px, 45px, 0);
  }
}

@keyframes glass-drift-b {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-90px, -40px, 0);
  }
}

@keyframes glass-drift-c {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(55px, -65px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-motion .glow {
    animation: none !important;
  }

  body .am-card {
    transition: none !important;
  }
}


/* =========================================================
   PLATFORM EXTENSION (propagation pass, 2026-08-28)
   Same materials as above, applied to the non-dashboard
   client surfaces: login, pending, notification settings,
   AI Analysis. All values are the author's - no new numbers.
   ========================================================= */

/* trade-card material -> login card, pending card, analysis stream cards */
body .login-card,
body .card,
body .scard {
  background:
    radial-gradient(ellipse 55% 85% at 89% 28%, rgba(123, 123, 123, 0.10) 0%, transparent 72%),
    radial-gradient(ellipse 44% 90% at 12% 22%, rgba(31, 135, 128, 0.07) 0%, transparent 72%),
    linear-gradient(135deg, rgba(60, 60, 60, 0.76) 0%, rgba(47, 47, 47, 0.68) 48%, rgba(54, 54, 54, 0.72) 100%) !important;
  backdrop-filter: blur(24px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
  border: 1px solid rgba(219, 219, 219, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 12px 36px rgba(0, 0, 0, 0.24),
    0 0 32px rgba(134, 134, 134, 0.028) !important;
}
body .scard.sel {
  border-color: rgba(73, 208, 179, 0.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.09),
    0 12px 36px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(24, 218, 171, 0.055) !important;
}

/* metric-well material -> login inputs, notification toggle rows,
   analysis sentence/detail/collect boxes */
body .login-card input[type="email"],
body .login-card input[type="password"],
body .toggle-row,
body .sentence,
body .detail,
body .estream,
body .hiw-step {
  background:
    linear-gradient(145deg, rgba(23, 23, 23, 0.68) 0%, rgba(34, 34, 34, 0.54) 100%) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  border: 1px solid rgba(156, 156, 156, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -8px 18px rgba(0, 0, 0, 0.055) !important;
}
body .sentence { border-left: 3px solid rgba(62, 234, 193, 0.50) !important; }

/* primary button material -> login submit */
body .submit-btn {
  color: #effffb !important;
  background:
    linear-gradient(135deg, rgba(66, 224, 188, 0.94) 0%, rgba(32, 177, 148, 0.91) 100%) !important;
  border: 1px solid rgba(106, 255, 219, 0.58) !important;
  border-radius: 8px !important;
  text-shadow: 0 1px 2px rgba(0, 38, 30, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 76, 59, 0.16),
    0 5px 16px rgba(21, 218, 168, 0.16) !important;
}

/* secondary button material -> login back-link, analysis filter buttons */
body .back-link,
body .fbtn,
body .ghost {
  color: #b6c5cd !important;
  background:
    linear-gradient(180deg, rgba(29, 29, 29, 0.58), rgba(21, 21, 21, 0.50)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(180, 180, 180, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 2px 7px rgba(0, 0, 0, 0.12) !important;
}

/* chip material -> analysis condition chips */
body .chip {
  color: #b4c3cb !important;
  background: rgba(22, 22, 22, 0.54) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  border: 1px solid rgba(172, 172, 172, 0.23) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
body .chip.on {
  color: #32e6b5 !important;
  background: rgba(26, 26, 26, 0.56) !important;
  border-color: rgba(31, 219, 170, 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 0 10px rgba(22, 218, 170, 0.035) !important;
}

/* PROPAGATION FIX 2026-08-28: author min-height:100% chain cannot stretch body
   (percentage vs auto html height) - short pages showed the raw html band. */
html { height: 100%; }
body { min-height: 100vh !important; }