/* Restrained glass and gloss accents for interactive TradersMill surfaces. */
:root {
  --tm-glass-surface: rgba(246, 249, 255, 0.84);
  --tm-glass-surface-solid: #f4f7ff;
  --tm-glass-menu-surface: rgba(255, 255, 255, 0.92);
  --tm-glass-menu-solid: #ffffff;
  --tm-glass-border: rgba(255, 255, 255, 0.72);
  --tm-glass-accent-border: rgba(82, 104, 230, 0.38);
  --tm-glass-top-highlight: rgba(255, 255, 255, 0.7);
  --tm-glass-inner-shadow: inset 0 1px 0 var(--tm-glass-top-highlight), inset 0 -1px 0 rgba(31, 54, 142, 0.12);
  --tm-glass-outer-shadow: 0 0.75rem 1.8rem rgba(27, 48, 132, 0.18);
  --tm-glass-primary-gradient: linear-gradient(135deg, #586ce9 0%, #3047d5 48%, #192cae 100%);
  --tm-glass-primary-hover: linear-gradient(135deg, #687bf0 0%, #3c52dd 48%, #2336b9 100%);
  --tm-glass-hover-glow: 0 0.9rem 2.2rem rgba(45, 67, 204, 0.28);
  --tm-glass-selected-glow: 0 0.65rem 1.6rem rgba(45, 67, 204, 0.2);
  --tm-glass-backdrop: blur(16px) saturate(125%);
}

:root[data-theme="dark"] {
  --tm-glass-surface: rgba(255, 255, 255, 0.035);
  --tm-glass-surface-solid: #0a0f1c;
  --tm-glass-menu-surface: rgba(10, 15, 28, 0.92);
  --tm-glass-menu-solid: #0a0f1c;
  --tm-glass-border: rgba(140, 170, 255, 0.14);
  --tm-glass-accent-border: rgba(76, 243, 255, 0.3);
  --tm-glass-top-highlight: rgba(231, 236, 246, 0.12);
  --tm-glass-inner-shadow: inset 0 1px 0 var(--tm-glass-top-highlight), inset 0 -1px 0 rgba(0, 0, 0, 0.32);
  --tm-glass-outer-shadow: 0 0.9rem 2.2rem rgba(0, 0, 0, 0.3);
  --tm-glass-primary-gradient: linear-gradient(135deg, #177f91 0%, #4652c4 52%, #684bd2 100%);
  --tm-glass-primary-hover: linear-gradient(135deg, #1d93a6 0%, #5360d5 52%, #7658df 100%);
  --tm-glass-hover-glow: 0 0.9rem 2.2rem rgba(76, 243, 255, 0.14), 0 0 2rem rgba(139, 107, 255, 0.12);
  --tm-glass-selected-glow: 0 0.65rem 1.6rem rgba(76, 243, 255, 0.1), 0 0 1.4rem rgba(139, 107, 255, 0.1);
}

/* True primary actions only. */
.tm-aurora-shell :is(.workspace-primary-button, .workspace-main .btn-primary, .aurora-button--primary),
.auth-experience .btn-primary {
  border-color: rgba(31, 49, 177, 0.86) !important;
  background: #3047d5 !important;
  background: var(--tm-glass-primary-gradient) !important;
  color: #fff !important;
  box-shadow: var(--tm-glass-inner-shadow), var(--tm-glass-outer-shadow);
}

.tm-aurora-shell :is(.workspace-primary-button, .workspace-main .btn-primary, .aurora-button--primary):hover,
.auth-experience .btn-primary:hover {
  border-color: rgba(50, 72, 210, 0.96) !important;
  background: #3c52dd !important;
  background: var(--tm-glass-primary-hover) !important;
  box-shadow: var(--tm-glass-inner-shadow), var(--tm-glass-hover-glow);
  transform: translateY(-1px);
}

.tm-aurora-shell :is(.workspace-primary-button, .workspace-main .btn-primary, .aurora-button--primary):focus-visible,
.auth-experience .btn-primary:focus-visible {
  outline: 3px solid rgba(91, 117, 235, 0.38);
  outline-offset: 3px;
  box-shadow: var(--tm-glass-inner-shadow), var(--tm-glass-hover-glow);
}

.tm-aurora-shell :is(.workspace-primary-button, .workspace-main .btn-primary, .aurora-button--primary):is(:disabled, [aria-disabled="true"]),
.auth-experience .btn-primary:disabled {
  border-color: #929bbd !important;
  background: #aeb5cc !important;
  box-shadow: none;
  transform: none;
}

/* The login feature panel is the only large decorative glass surface. */
.auth-experience .auth-benefit-panel {
  isolation: isolate;
  border-color: rgba(192, 211, 255, 0.25);
  background: #10265f;
  background:
    radial-gradient(circle at 16% 2%, rgba(122, 157, 255, 0.24), transparent 37%),
    radial-gradient(circle at 92% 84%, rgba(31, 181, 169, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(27, 57, 133, 0.96), rgba(9, 28, 77, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(2, 13, 43, 0.42),
    0 1.35rem 3.2rem rgba(5, 21, 61, 0.26);
  -webkit-backdrop-filter: var(--tm-glass-backdrop);
  backdrop-filter: var(--tm-glass-backdrop);
}

.auth-experience .auth-benefit-panel::before {
  z-index: -2;
  background-image:
    linear-gradient(90deg, transparent 4%, rgba(255, 255, 255, 0.38) 28%, rgba(255, 255, 255, 0.12) 68%, transparent 96%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-position: 0 0, 0 0, 0 0;
  background-size: 100% 1px, 48px 48px, 48px 48px;
  background-repeat: no-repeat, repeat, repeat;
}

.auth-experience .auth-benefit-panel::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(116deg, rgba(255, 255, 255, 0.075), transparent 38%, rgba(111, 139, 242, 0.06));
  content: "";
  pointer-events: none;
}

/* Selected navigation and controls retain their existing dimensions and semantics. */
.tm-aurora-shell .workspace-nav-link.active,
.tm-aurora-shell .workspace-nav-link[aria-current="page"] {
  border-color: rgba(146, 168, 255, 0.3);
  background: #213c83;
  background: linear-gradient(90deg, rgba(83, 111, 225, 0.34), rgba(45, 68, 157, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(4, 14, 51, 0.18),
    var(--tm-glass-selected-glow);
  -webkit-backdrop-filter: var(--tm-glass-backdrop);
  backdrop-filter: var(--tm-glass-backdrop);
}

.tm-aurora-shell .workspace-nav-link.active::before,
.tm-aurora-shell .workspace-nav-link[aria-current="page"]::before {
  background: #a8b9ff;
  box-shadow: 0 0 0.9rem rgba(145, 167, 255, 0.64);
}

.tm-aurora-shell :is(
  [role="tab"][aria-selected="true"],
  .settings-subnav-link.active,
  .import-progress li.is-active,
  .account-mode-card:has(input:checked),
  .entry-method-options label:has(input:checked),
  .broker-card:has(input:checked)
) {
  border-color: var(--tm-glass-accent-border);
  background: var(--tm-glass-surface-solid);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(230, 237, 255, 0.78));
  box-shadow: var(--tm-glass-inner-shadow), var(--tm-glass-selected-glow);
  -webkit-backdrop-filter: var(--tm-glass-backdrop);
  backdrop-filter: var(--tm-glass-backdrop);
}

.tm-aurora-shell .trade-entry-progress__step.is-active span {
  border-color: rgba(79, 108, 230, 0.58);
  background: var(--tm-glass-surface-solid);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(222, 232, 255, 0.82));
  color: #2944c7;
  box-shadow: var(--tm-glass-inner-shadow), var(--tm-glass-selected-glow);
  -webkit-backdrop-filter: var(--tm-glass-backdrop);
  backdrop-filter: var(--tm-glass-backdrop);
}

.tm-aurora-shell .provider-choice.is-selected {
  border-color: var(--provider-accent);
  background: var(--tm-glass-surface-solid);
  background: linear-gradient(112deg, var(--provider-accent-wash), rgba(255, 255, 255, 0.94) 68%);
  box-shadow:
    inset 4px 0 0 var(--provider-accent-edge),
    inset 0 1px 0 var(--tm-glass-top-highlight),
    var(--tm-glass-selected-glow);
  -webkit-backdrop-filter: var(--tm-glass-backdrop);
  backdrop-filter: var(--tm-glass-backdrop);
}

/* Elevated menu surfaces; positioning and interaction remain component-owned. */
.tm-aurora-shell :is(.workspace-dropdown, .dropdown-menu, .account-actions-menu) {
  border-color: rgba(54, 76, 153, 0.2) !important;
  background: var(--tm-glass-menu-solid) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 255, 0.88)) !important;
  box-shadow: var(--tm-glass-inner-shadow), 0 1rem 2.6rem rgba(24, 40, 95, 0.2) !important;
  -webkit-backdrop-filter: var(--tm-glass-backdrop);
  backdrop-filter: var(--tm-glass-backdrop);
}

/* Explicit opaque surfaces for browsers without backdrop-filter support. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .auth-experience .auth-benefit-panel {
    background: #10265f;
  }

  .tm-aurora-shell .workspace-nav-link.active,
  .tm-aurora-shell .workspace-nav-link[aria-current="page"] {
    background: #213c83;
  }

  .tm-aurora-shell :is(
    [role="tab"][aria-selected="true"],
    .settings-subnav-link.active,
    .import-progress li.is-active,
    .account-mode-card:has(input:checked),
    .entry-method-options label:has(input:checked),
    .broker-card:has(input:checked),
    .trade-entry-progress__step.is-active span,
    .provider-choice.is-selected
  ) {
    background: var(--tm-glass-surface-solid);
  }

  .tm-aurora-shell :is(.workspace-dropdown, .dropdown-menu, .account-actions-menu) {
    background: var(--tm-glass-menu-solid) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-aurora-shell :is(.workspace-primary-button, .workspace-main .btn-primary, .aurora-button--primary),
  .auth-experience .btn-primary {
    transition: none !important;
  }

  .tm-aurora-shell :is(.workspace-primary-button, .workspace-main .btn-primary, .aurora-button--primary):hover,
  .auth-experience .btn-primary:hover {
    transform: none;
  }
}