/* =====================================================================
   NXTSignal "Pro Desk" theme layer  (Track A of the UI/UX migration)
   ---------------------------------------------------------------------
   Presentation-only stylesheet injected AFTER the compiled app CSS.
   It overrides the app's design tokens (CSS variables) and restyles
   Bootstrap 5.3 components. No functional code is changed.
   Rollback = remove the <link> tag in index.html.
   IMPORTANT: bump "?v=" in index.html whenever this file changes
   (the static host sends ETag only, so browsers may cache heuristically).
   ===================================================================== */

/* =====================================================================
   A1 - TOKENS: app variables (light = default)
   ===================================================================== */
:root {
  --card-hover: #C9D2E3;
  --primary-bg: #F1F3F8;
  --secondary-bg: #F1F3F8;
  --text-color: #0B1222;
  --hover-effect: rgba(11, 18, 34, .045);
  --border-color: #DFE3EC;
  --font-family: "Inter", "Segoe UI", Roboto, sans-serif;
  --heading-background-color: linear-gradient(135deg, #3B74FF 0%, #2E63E7 100%);
  --universal-backgroun-color: #3B74FF;
  --muted-text-color: #667085;
  --btn-background-color: #3B74FF;
  --cancel-btn-color: #fff;
  --cancel-btn-bg: linear-gradient(90deg, #98A2B3, #667085);
  --cancel-btn-hover-bg: linear-gradient(90deg, #667085, #98A2B3);
  --disabled-color: #E7EBF3;
  --add-btn-color: #fff;
  --add-btn-bg: linear-gradient(135deg, #3B74FF, #14B8C8);
  --loader-background: rgba(241, 243, 248, .72);
  --tb-btn-color: #fff;
  --tb-btn-bg: #3B74FF;
  --tb-btn-border-color: #2E63E7;
  --tb-btn-hover-color: #fff;
  --tb-btn-hover-bg: #2E63E7;
  --tb-btn-hover-border-color: #2E63E7;
  --tb-btn-active-color: #fff;
  --tb-btn-active-bg: #1F4FD8;
  --tb-btn-active-border-color: #1F4FD8;
  --glass-bg: rgba(255, 255, 255, .65);
  --glass-border: rgba(11, 18, 34, .08);
  --active-glass-bg: rgba(34, 197, 94, .14);
  --active-glass-color: #16A34A;
  --inactive-glass-bg: rgba(244, 63, 94, .12);
  --inactive-glass-color: #DC2F55;
  --sidebar-bg: #FFFFFF;
  --sidebar-text: #0B1222;
  --text-muted: #667085;
  --btn-link-color: #2E63E7;
  --bg-gradient: linear-gradient(135deg, #EDF0F7 25%, #F1F3F8 100%);
  --success-color: #16A34A;
  --danger-color: #DC2F55;
  --input-bg-color: #FFFFFF;
  --placeholder-color: #98A2B3;
  --accent-bg: #16A34A;
  --accent-text: #FFFFFF;
  --login-input-bg: #FFFFFF;
  --card-bg: #FFFFFF;
  --side-card-bg: #F6F8FC;
  --card-text: #0B1222;
  --icon-color: #3B74FF;
  --timeline-line: #DFE3EC;
  --moving-text-color: #475467;
  --stratgy-report-header-bg: #F1F3F8;
}

/* A1 - TOKENS: Bootstrap 5.3 variables (light) */
:root {
  --bs-body-bg: #F1F3F8;
  --bs-body-color: #0B1222;
  --bs-border-color: #DFE3EC;
  --bs-border-color-translucent: rgba(11, 18, 34, .08);
  --bs-secondary-bg: #F6F8FC;
  --bs-tertiary-bg: #EEF1F7;
  --bs-emphasis-color: #0B1222;
  --bs-secondary-color: rgba(11, 18, 34, .62);
  --bs-primary: #3B74FF;
  --bs-primary-rgb: 59, 116, 255;
  --bs-link-color: #2E63E7;
  --bs-link-hover-color: #1F4FD8;
  --bs-link-color-rgb: 46, 99, 231;
  --bs-heading-color: #0B1222;
  --bs-card-bg: #FFFFFF;
  --bs-card-border-color: #DFE3EC;
  --bs-success: #16A34A;
  --bs-success-rgb: 22, 163, 74;
  --bs-danger: #DC2F55;
  --bs-danger-rgb: 220, 47, 85;
  --bs-warning: #D97706;
  --bs-warning-rgb: 217, 119, 6;
  --bs-info: #0E7490;
  --bs-info-rgb: 14, 116, 144;
}

/* A1 - TOKENS: dark theme (app + Bootstrap) */
[data-theme=dark],
html[data-bs-theme=dark] {
  color-scheme: dark;
  --card-hover: #2A3142;
  --primary-bg: #0A0C11;
  --secondary-bg: #0A0C11;
  --text-color: #E7EBF3;
  --hover-effect: rgba(255, 255, 255, .045);
  --border-color: #232A38;
  --heading-background-color: linear-gradient(135deg, #3B74FF 0%, #1F4FD8 100%);
  --universal-backgroun-color: #3B74FF;
  --muted-text-color: #8A93A6;
  --btn-background-color: #3B74FF;
  --cancel-btn-bg: linear-gradient(90deg, #232A38, #2E3648);
  --cancel-btn-hover-bg: linear-gradient(90deg, #2E3648, #232A38);
  --disabled-color: #2A3142;
  --add-btn-color: #fff;
  --add-btn-bg: linear-gradient(135deg, #3B74FF, #14B8C8);
  --loader-background: rgba(10, 12, 17, .65);
  --tb-btn-color: #fff;
  --tb-btn-bg: #3B74FF;
  --tb-btn-border-color: #2E63E7;
  --tb-btn-hover-color: #fff;
  --tb-btn-hover-bg: #5C90FF;
  --tb-btn-hover-border-color: #5C90FF;
  --tb-btn-active-color: #fff;
  --tb-btn-active-bg: #1F4FD8;
  --tb-btn-active-border-color: #1F4FD8;
  --glass-bg: rgba(255, 255, 255, .04);
  --glass-border: rgba(255, 255, 255, .09);
  --active-glass-bg: rgba(34, 197, 94, .16);
  --active-glass-color: #22C55E;
  --inactive-glass-bg: rgba(244, 67, 108, .16);
  --inactive-glass-color: #FF7A9C;
  --sidebar-bg: #07090F;
  --sidebar-text: #E7EBF3;
  --text-color: #E7EBF3;
  --text-muted: #8A93A6;
  --btn-link-color: #5C90FF;
  --bg-gradient: linear-gradient(135deg, #0C0F16 25%, #0A0C11 100%);
  --muted-text-color: #8A93A6;
  --success-color: #22C55E;
  --danger-color: #F4436C;
  --input-bg-color: #10131A;
  --login-input-bg: #fff;
  --placeholder-color: #5E6A82;
  --accent-bg: #22C55E;
  --accent-text: #FFFFFF;
  --disabled-color: #2A3142;
  --card-bg: #10131A;
  --side-card-bg: #151926;
  --card-text: #E7EBF3;
  --icon-color: #5C90FF;
  --timeline-line: #232A38;
  --moving-text-color: #C3CAD9;
  --stratgy-report-header-bg: #151926;
  --bs-body-bg: #0A0C11;
  --bs-body-color: #E7EBF3;
  --bs-border-color: #232A38;
  --bs-border-color-translucent: rgba(255, 255, 255, .09);
  --bs-secondary-bg: #151926;
  --bs-tertiary-bg: #10131A;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: rgba(231, 235, 243, .68);
  --bs-primary: #3B74FF;
  --bs-primary-rgb: 59, 116, 255;
  --bs-link-color: #5C90FF;
  --bs-link-hover-color: #7FA8FF;
  --bs-link-color-rgb: 92, 144, 255;
  --bs-heading-color: #E7EBF3;
  --bs-card-bg: #10131A;
  --bs-card-border-color: #232A38;
  --bs-success: #22C55E;
  --bs-success-rgb: 34, 197, 94;
  --bs-danger: #F4436C;
  --bs-danger-rgb: 244, 67, 108;
  --bs-warning: #F59E0B;
  --bs-warning-rgb: 245, 158, 11;
  --bs-info: #14B8C8;
  --bs-info-rgb: 20, 184, 200;
}

/* =====================================================================
   A1 - BASE + TYPOGRAPHY
   ===================================================================== */
body {
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-color);
}

a { text-decoration: none; }

::selection { background: rgba(59, 116, 255, .28); }

:focus-visible {
  outline: 2px solid #5C90FF;
  outline-offset: 1px;
}

/* Numeric alignment inside data tables */
.table td, .table th { font-variant-numeric: tabular-nums; }

.font-monospace, code, kbd, pre, samp {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  letter-spacing: -.01em;
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #5C90FF; }

/* =====================================================================
   A2 - COMPONENTS: buttons
   ===================================================================== */
.btn {
  --bs-btn-border-radius: 6px;
  border-radius: 6px;
  font-weight: 500;
  letter-spacing: .01em;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-sm { --bs-btn-border-radius: 6px; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59, 116, 255, .3); }
.btn-primary {
  --bs-btn-bg: #3B74FF;
  --bs-btn-border-color: #3B74FF;
  --bs-btn-hover-bg: #2E63E7;
  --bs-btn-hover-border-color: #2E63E7;
  --bs-btn-active-bg: #1F4FD8;
  --bs-btn-active-border-color: #1F4FD8;
  --bs-btn-disabled-bg: #3B74FF;
  --bs-btn-disabled-border-color: #3B74FF;
}
.btn-success {
  --bs-btn-bg: #16A34A;
  --bs-btn-border-color: #16A34A;
  --bs-btn-hover-bg: #128A3F;
  --bs-btn-hover-border-color: #128A3F;
  --bs-btn-active-bg: #0F7A37;
  --bs-btn-active-border-color: #0F7A37;
}
.btn-danger {
  --bs-btn-bg: #DC2F55;
  --bs-btn-border-color: #DC2F55;
  --bs-btn-hover-bg: #C2264A;
  --bs-btn-hover-border-color: #C2264A;
}
.btn-outline-primary { --bs-btn-color: #3B74FF; --bs-btn-border-color: rgba(59, 116, 255, .45); --bs-btn-hover-bg: #3B74FF; --bs-btn-hover-border-color: #3B74FF; }
.btn-link { color: var(--btn-link-color); }
.btn-light { --bs-btn-bg: var(--side-card-bg); --bs-btn-border-color: var(--border-color); --bs-btn-color: var(--text-color); }

/* =====================================================================
   A2 - COMPONENTS: forms
   ===================================================================== */
.form-control, .form-select {
  background-color: var(--input-bg-color);
  border-color: var(--border-color);
  color: var(--text-color);
  border-radius: 6px;
  min-height: 36px;
  font-size: 13.5px;
}
.form-control:focus, .form-select:focus {
  background-color: var(--input-bg-color);
  color: var(--text-color);
  border-color: #3B74FF;
  box-shadow: 0 0 0 3px rgba(59, 116, 255, .18);
}
.form-control::placeholder { color: var(--placeholder-color); }
.form-label { font-size: 12.5px; font-weight: 500; color: var(--muted-text-color); }
.form-check-input:checked { background-color: #3B74FF; border-color: #3B74FF; }
.form-check-input:focus { border-color: #3B74FF; box-shadow: 0 0 0 3px rgba(59, 116, 255, .18); }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }

/* react-select (emotion classes start with "css-"; prefixed variants use "__") */
[class^="css-"][class*="-control"],
[class*="__control"] {
  border-radius: 6px !important;
  border-color: var(--border-color) !important;
  background-color: var(--input-bg-color) !important;
  min-height: 36px !important;
  box-shadow: none !important;
}
[class^="css-"][class*="-control"]:hover,
[class*="__control"]:hover { border-color: #5C90FF !important; }
[class^="css-"][class*="-menu"],
[class*="__menu"] {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(10, 12, 17, .35) !important;
}
[class^="css-"][class*="-option"],
[class*="__option"] { font-size: 13px !important; }
[class^="css-"][class*="-singleValue"],
[class*="__single-value"],
[class^="css-"][class*="-multiValue"],
[class*="__multi-value"] { font-size: 13px !important; color: var(--text-color) !important; }

/* =====================================================================
   A2 - COMPONENTS: cards, badges, tables
   ===================================================================== */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(10, 12, 17, .05);
}
.card-header, .card-footer {
  background-color: transparent;
  border-color: var(--border-color);
}
.card-body { color: var(--card-text); }

.badge {
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .34em .58em;
}

.table {
  --bs-table-border-color: var(--border-color);
  --bs-table-color: var(--text-color);
  font-size: 13px;
}
.table > :not(caption) > * > * { padding: .62rem .75rem; }
.table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-text-color);
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.table tbody tr { transition: background-color .12s ease; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--hover-effect); }
.table-sm > :not(caption) > * > * { padding: .45rem .6rem; }

/* Sticky table headers inside scroll containers */
.table-responsive .table thead th { position: sticky; top: 0; z-index: 2; }

/* =====================================================================
   A2 - COMPONENTS: pagination, dropdowns, modals, overlays
   ===================================================================== */
.pagination {
  --bs-pagination-bg: var(--card-bg);
  --bs-pagination-color: var(--text-color);
  --bs-pagination-border-color: var(--border-color);
  --bs-pagination-hover-bg: var(--side-card-bg);
  --bs-pagination-hover-color: var(--text-color);
  --bs-pagination-hover-border-color: var(--border-color);
  --bs-pagination-active-bg: #3B74FF;
  --bs-pagination-active-border-color: #3B74FF;
  --bs-pagination-disabled-bg: var(--card-bg);
  --bs-pagination-disabled-border-color: var(--border-color);
  font-size: 13px;
}
.page-link { border-radius: 6px !important; margin: 0 2px; min-width: 32px; text-align: center; }

.dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 6px;
  font-size: 13px;
  box-shadow: 0 12px 32px rgba(10, 12, 17, .35);
}
.dropdown-item { border-radius: 6px; padding: 7px 10px; }
.dropdown-item:active { background-color: #3B74FF; }

.modal-content {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--card-bg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}
.modal-header, .modal-footer { border-color: var(--border-color); }

.nav-tabs { border-bottom-color: var(--border-color); }
.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  color: var(--muted-text-color);
}
.nav-tabs .nav-link.active {
  background-color: var(--card-bg);
  border-color: var(--border-color) var(--border-color) var(--card-bg);
  color: var(--text-color);
}

.alert { border-radius: 8px; border-width: 1px; font-size: 13px; }
.progress { background-color: var(--side-card-bg); border-radius: 999px; }
.spinner-border, .spinner-grow { color: #3B74FF; }

.tooltip {
  --bs-tooltip-bg: #10131A;
  --bs-tooltip-color: #E7EBF3;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-border-radius: 6px;
}
.tooltip-inner {
  border: 1px solid #232A38;
  font-size: 12px;
  padding: 6px 10px;
}

.Toastify__toast {
  border-radius: 10px;
  border: 1px solid var(--border-color);
  font-size: 13px;
  font-family: var(--font-family);
}
.Toastify__toast-body { font-family: var(--font-family); }

/* =====================================================================
   A2 - COMPONENTS: overview page surfaces
   Two dashboard blocks hard-code light backgrounds inline (the
   "Trading Insight of the Day" gradient card and the pale "Knowledge
   Hub" panel). They are re-skinned here with theme variables so both
   themes stay consistent. The attribute selectors match the serialized
   inline styles (browsers normalize hex colors to rgb() in the style
   attribute); keep both forms to stay resilient.
   ===================================================================== */
div[style*="rgb(253, 251, 251)"], div[style*="#fdfbfb"] {
  background: var(--side-card-bg) !important;
  border-color: var(--border-color) !important;
  box-shadow: none !important;
}
div[style*="rgb(253, 251, 251)"] > div, div[style*="#fdfbfb"] > div { color: var(--muted-text-color) !important; }
div[style*="rgb(253, 251, 251)"] > p, div[style*="#fdfbfb"] > p { color: var(--text-color) !important; }

div[style*="rgb(247, 255, 251)"], div[style*="#f7fffb"] {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}
/* The "Knowledge Hub" heading is a hard-coded .text-dark element that must
   follow the theme once its surface is themed above. */
div[style*="rgb(247, 255, 251)"] .text-dark, div[style*="#f7fffb"] .text-dark {
  color: var(--text-color) !important;
}

/* =====================================================================
   A3 - STRUCTURE: sidebar, nav items, main content
   ===================================================================== */
/* Classic admin layout: the drawer is an <aside class="position-fixed
   start-0"> whose 180px/75px width is managed inline by the app.
   The legacy .sidebar class below stays for other layouts (e.g. the
   client panel); its 240px width is presentation-only. */
.sidebar {
  width: 240px;
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
  box-shadow: none;
}
aside.position-fixed {
  box-shadow: none !important;
  border-right: 1px solid var(--border-color);
}
/* .main-content's left offset is app-managed through inline styles keyed to
   the sidebar state and breakpoints - intentionally NOT overridden here. */

/* Sidebar navigation items (anchors injected with sidebar-* classes) */
a[class*="sidebar-"] {
  border-radius: 8px;
  margin: 1px 8px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
a[class*="sidebar-"]:hover { background-color: var(--hover-effect) !important; }

/* Circular icon chip on nav items */
.icon-wrapper {
  background-color: var(--side-card-bg);
  color: var(--icon-color);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 1rem;
}
@media (max-width: 768px) {
  .icon-wrapper { width: 26px !important; height: 26px !important; }
}

/* Collapse handle on the sidebar edge */
.sidebar-side-btn {
  background: #3B74FF;
  box-shadow: 0 2px 10px rgba(59, 116, 255, .45);
  border: 1px solid rgba(255, 255, 255, .18);
}
.sidebar-side-btn:hover { background: #2E63E7; }

/* Directory headings on list pages */
.client-directory-heading, .user-directory-heading {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Page title banners: the compiled list pages render a gradient banner strip
   (<div style="background: var(--heading-background-color)"> with a gold
   gradient headline). Pro Desk replaces that with a flat surface + hairline
   border. The sidebar ACTIVE item keeps the accent gradient via its own
   inline style, so the shared variable is intentionally left unchanged. */
div[style*="--heading-background-color"] {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px;
}
div[style*="--heading-background-color"] h5 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-color) !important;
  font-size: 15px !important;
  letter-spacing: .04em !important;
}

/* Sidebar bottom utility icons + logout sit on .btn-light chips */
.sidebar-bottom-icon { background-color: var(--side-card-bg); border-color: var(--border-color); }

/* =====================================================================
   A4 - SHELL MATCH: bring the classic chrome in line with the
   nxtsignal-web Pro Desk shell (Track B): panel-soft drawer surface,
   accent-tint active item with a 3px left rail, bare muted nav icons,
   56px translucent blurred top bar, flat left-aligned page headers.
   Only presentational rules - widths and offsets stay app-managed.
   ===================================================================== */
:root { --pd-accent-soft: rgba(59, 116, 255, .12); }
[data-theme=dark],
html[data-bs-theme=dark] { --pd-accent-soft: rgba(59, 116, 255, .17); }

/* --- Drawer surface: the aside carries an inline "background:
       var(--card-bg)" (and the client layout uses .sidebar); both move
       to the shell's panel-soft tone. --- */
aside.position-fixed,
.sidebar {
  background: var(--side-card-bg) !important;
}

/* --- Nav items: shell density + make the label size real
       (.menu-label has an inline 0.9rem that wins over A3). --- */
a[class*="sidebar-"] { padding-block: 6px !important; }
a[class*="sidebar-"] .menu-label { font-size: 13.5px !important; font-weight: 500; }

/* Inactive icons are bare and muted in the shell - no chip background. */
aside a[class*="sidebar-"] .icon-wrapper,
.sidebar a[class*="sidebar-"] .icon-wrapper {
  background-color: transparent;
  color: var(--muted-text-color);
}
aside a[class*="sidebar-"]:hover .icon-wrapper,
.sidebar a[class*="sidebar-"]:hover .icon-wrapper { color: var(--text-color); }

/* --- Active item: the compiled app paints an inline accent gradient
       (background: var(--heading-background-color) + white text). The
       shell uses an accent tint with a 3px rail and accent icon/label
       instead; attribute selector + !important beat the inline style. --- */
aside a[class*="sidebar-"][style*="--heading-background-color"],
.sidebar a[class*="sidebar-"][style*="--heading-background-color"],
aside a.bg-active,
.sidebar a.bg-active {
  position: relative;
  background: var(--pd-accent-soft) !important;
  color: var(--icon-color) !important;
}
aside a[class*="sidebar-"][style*="--heading-background-color"]::before,
.sidebar a[class*="sidebar-"][style*="--heading-background-color"]::before,
aside a.bg-active::before,
.sidebar a.bg-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 999px 999px 0;
  background: var(--icon-color);
}
aside a[class*="sidebar-"][style*="--heading-background-color"] .icon-wrapper,
.sidebar a[class*="sidebar-"][style*="--heading-background-color"] .icon-wrapper,
aside a.bg-active .icon-wrapper,
.sidebar a.bg-active .icon-wrapper {
  background-color: transparent;
  color: var(--icon-color);
}

/* --- Top bar: 56px tall like the shell header, translucent over the
       page background with a blur, hairline bottom edge, no shadow.
       (.shadow-sm / .border-0 utilities are !important, so beat them
       with a higher-specificity !important rule.) --- */
nav.real-fixed-navbar {
  background: var(--primary-bg) !important;
  background: color-mix(in srgb, var(--primary-bg) 86%, transparent) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

/* --- Dashboard welcome banner: hard-coded blue strip
       (inline background: var(--btn-background-color)) with a gold
       gradient headline. The shell look = flat surface card with a
       left-aligned title and muted tagline. --- */
div[style*="--btn-background-color"] {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px;
  box-shadow: none !important;
  color: var(--text-color) !important;
  align-items: flex-start !important;
}
div[style*="--btn-background-color"] h1,
div[style*="--btn-background-color"] h5,
div[style*="--heading-background-color"] h1 {
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-color) !important;
}
div[style*="--btn-background-color"] h1 {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}
div[style*="--btn-background-color"] p {
  color: var(--muted-text-color) !important;
  opacity: 1 !important;
  font-size: 13.5px !important;
}

/* =====================================================================
   A5 - SIDEBAR ICONS: one 24px outline family for every role.
   Inline SVG masks inherit the theme color without network requests.
   The compiled links, labels, tooltips and click targets stay intact;
   only their decorative glyphs change. Unsupported browsers retain the
   original icons. Href hooks also cover items without sidebar-* classes.
   ===================================================================== */
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  :is(aside.position-fixed, .sidebar) {
    /* Default/dashboard: four panels. */
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
  }

  /* Team, demo accounts, live accounts, broker wallets and licenses. */
  :is(aside.position-fixed, .sidebar) a[href="/users"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 21v-2a6 6 0 0 1 12 0v2M16 5a3 3 0 0 1 0 6M21 21v-2a6 6 0 0 0-4-5.65'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) a[href="/clients"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6l-6 9a2 2 0 0 0 1.7 3h12.6a2 2 0 0 0 1.7-3l-6-9V3M7.3 14h9.4M10 17h.01M14 18h.01'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) a[href="/live-clients"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M2 21v-2a7 7 0 0 1 11-5.74M16 18l2 2 4-5'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) a[href="/demates"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 8V5a2 2 0 0 0-2-2H6a3 3 0 0 0 0 6h14a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a3 3 0 0 1-3-3V6M21 13h-4a2 2 0 0 0 0 4h4'/%3E%3Cpath d='M17 15h.01'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) a[href="/license"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5'/%3E%3Cpath d='m11.5 11.5 9 9M17 17l3-3M14 14l3-3M6.5 6.5h.01'/%3E%3C/svg%3E");
  }

  /* Strategy nodes, activity pulse, reports, infrastructure and manual trades. */
  :is(aside.position-fixed, .sidebar) a:is([href="/strategies"], [href="/client-strategy"]) {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='6' rx='1.5'/%3E%3Crect x='2' y='16' width='6' height='6' rx='1.5'/%3E%3Crect x='16' y='16' width='6' height='6' rx='1.5'/%3E%3Cpath d='M12 8v4M5 16v-4h14v4'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) a[href="/activity-log"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h4l3-9 6 18 3-9h4'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) a[href="/user-startegy-reports"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18M7 16v-5M12 16V6M17 16v-8'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) a[href="/ip-config"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='7' rx='2'/%3E%3Crect x='3' y='14' width='18' height='7' rx='2'/%3E%3Cpath d='M7 6.5h.01M7 17.5h.01M11 6.5h6M11 17.5h6'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) a[href="/trade-panel"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2v3M7 15v7M17 2v7M17 19v3'/%3E%3Crect x='4' y='5' width='6' height='10' rx='1'/%3E%3Crect x='14' y='9' width='6' height='10' rx='1'/%3E%3C/svg%3E");
  }

  /* Client signals, order book, completed trades, working and setup. */
  :is(aside.position-fixed, .sidebar) a[href="/signal"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4M5 5a10 10 0 0 0 0 14M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) a[href="/getorders"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M8 4H5a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-3M9 11h6M9 16h6'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) a[href="/getrades"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18l-4-4M21 17H3l4 4'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) a[href="/client-working"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m10 8 6 4-6 4V8Z'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) a[href="/trade-setting"] {
    --pd-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h3M10 6h11M3 12h11M18 12h3M3 18h3M10 18h11'/%3E%3Ccircle cx='8' cy='6' r='2'/%3E%3Ccircle cx='16' cy='12' r='2'/%3E%3Ccircle cx='8' cy='18' r='2'/%3E%3C/svg%3E");
  }

  /* All role maps share this wrapper, even when link classes differ. */
  :is(aside.position-fixed, .sidebar) a .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    color: var(--muted-text-color);
  }
  :is(aside.position-fixed, .sidebar) a:is(:hover, :focus-visible) .icon-wrapper {
    color: var(--text-color);
  }
  :is(aside.position-fixed, .sidebar) a:is(.bg-active, [aria-current="page"], [style*="--heading-background-color"]) .icon-wrapper {
    color: var(--icon-color);
  }
  :is(aside.position-fixed, .sidebar) a .icon-wrapper > svg {
    display: none;
  }
  :is(aside.position-fixed, .sidebar) a .icon-wrapper::before {
    content: "";
    display: block;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--pd-nav-icon) center / contain no-repeat;
    mask: var(--pd-nav-icon) center / contain no-repeat;
  }

  /* Existing footer controls: settings, notifications and collapsed terms. */
  :is(aside.position-fixed, .sidebar) .sidebar-bottom-icon:first-child {
    --pd-utility-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 3-1 3-3 1 1 3-2 2 2 2-1 3 3 1 1 3h6l1-3 3-1-1-3 2-2-2-2 1-3-3-1-1-3H9Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) .sidebar-bottom-icon:nth-child(2) {
    --pd-utility-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) .tc-tooltip-wrapper > button {
    --pd-utility-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H5a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V8l-6-6ZM14 2v6h6M8 15l3 3 5-6'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar) :is(.sidebar-bottom-icon, .tc-tooltip-wrapper > button) {
    color: var(--muted-text-color);
  }
  :is(aside.position-fixed, .sidebar) :is(.sidebar-bottom-icon, .tc-tooltip-wrapper > button):is(:hover, :focus-visible) {
    color: var(--icon-color);
  }
  :is(aside.position-fixed, .sidebar) :is(.sidebar-bottom-icon, .tc-tooltip-wrapper > button, .sidebar-side-btn) > svg {
    display: none;
  }
  :is(aside.position-fixed, .sidebar) :is(.sidebar-bottom-icon, .tc-tooltip-wrapper > button, .sidebar-side-btn)::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--pd-utility-icon) center / contain no-repeat;
    mask: var(--pd-utility-icon) center / contain no-repeat;
  }

  /* Labels are mounted only when expanded; no JS/state override needed. */
  :is(aside.position-fixed, .sidebar) .sidebar-side-btn {
    color: white;
    --pd-utility-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
  }
  :is(aside.position-fixed, .sidebar):has(.menu-label) .sidebar-side-btn {
    --pd-utility-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E");
  }
}

/* =====================================================================
   A5 - CLASSIC LOGIN RESTYLE (dark premium fintech)
   ---------------------------------------------------------------------
   Restyles the compiled app's unauthenticated login screen
   (.login-full-wrapper tree) to match the Track B login design:
   deep navy canvas + grid, glass card, cyan/blue accents.
   Scope is strictly the login tree; panel pages never contain
   .login-full-wrapper, so they are unaffected.
   ===================================================================== */

/* --- page canvas: deep navy + accent glows (only when login present) --- */
body:has(.login-full-wrapper) {
  background: #020817 !important;
}
.main-content:has(.login-full-wrapper) {
  background: transparent !important;
  padding: 0 !important;
}

.login-full-wrapper {
  background:
    radial-gradient(920px 520px at 88% -10%, rgba(37, 99, 235, 0.17), rgba(0, 0, 0, 0) 60%),
    radial-gradient(720px 480px at -12% 108%, rgba(20, 184, 200, 0.12), rgba(0, 0, 0, 0) 62%),
    linear-gradient(160deg, #020817 0%, #03111f 52%, #061426 100%) !important;
  padding: 40px 24px !important;
}

/* soft glow blob (compiled ::before is a blank blurred circle) */
.login-full-wrapper::before {
  background: radial-gradient(circle, rgba(59, 116, 255, 0.32), rgba(20, 184, 200, 0.14) 55%, transparent 72%) !important;
  top: -140px !important;
  right: -100px !important;
  bottom: auto !important;
  left: auto !important;
}

/* faint trading grid over the canvas */
.login-full-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.055) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.055) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, black 25%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 42%, black 25%, transparent 78%);
}

/* --- glass card --- */
.login-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(165deg, rgba(13, 25, 48, 0.82), rgba(4, 12, 26, 0.9)) !important;
  border: 1px solid rgba(111, 156, 255, 0.22) !important;
  border-radius: 24px !important;
  box-shadow:
    0 30px 80px rgba(2, 6, 18, 0.6),
    0 0 60px rgba(37, 99, 235, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

/* --- left column: form panel --- */
.login-card .left-section,
.login-card .right-section {
  min-width: 0 !important;
}
.login-card .left-section {
  align-items: center !important;
  padding: 48px 44px !important;
  color: #e7ebf3;
}
/* drop the external Unsplash photo behind the form */
.login-card .left-section::before {
  display: none !important;
}

.login-card .brand {
  color: #ffffff;
  margin-bottom: 28px !important;
  letter-spacing: -0.01em;
}
.login-card .brand span {
  background: linear-gradient(100deg, #5c90ff 0%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.login-card .title-text {
  color: #ffffff;
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.login-card .sub-text {
  color: #8b95ad !important;
  opacity: 1 !important;
  margin-bottom: 30px !important;
}
.login-card .label {
  color: #8b95ad;
  opacity: 1 !important;
  font-size: 13px !important;
  font-weight: 500;
}

.login-card .form-inner-wrapper {
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.login-card .input-field,
.login-card .password-wrapper {
  max-width: 400px !important;
}
.login-card .input-field {
  height: 46px;
  padding: 10px 14px !important;
  background: rgba(10, 18, 36, 0.6) !important;
  border: 1px solid rgba(120, 150, 200, 0.18) !important;
  border-radius: 10px !important;
  color: #e7ebf3 !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
.login-card .input-field::placeholder {
  color: #5b6780;
}
.login-card .input-field:focus {
  background: rgba(10, 18, 36, 0.85) !important;
  border-color: rgba(34, 211, 238, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12) !important;
}
.login-card .eye-icon {
  color: #667085;
  transition: color 0.2s ease;
}
.login-card .eye-icon:hover {
  color: #22d3ee;
}

/* --- sign-in button: blue -> cyan sweep --- */
.login-card .signin-btn {
  width: 100% !important;
  max-width: none !important;
  margin: 28px 0 0 !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: linear-gradient(100deg, #2563eb 0%, #06b6d4 52%, #2563eb 100%) !important;
  background-size: 210% 100% !important;
  background-position: 0 0 !important;
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35);
  transition: background-position 0.45s ease, transform 0.15s ease, box-shadow 0.3s ease !important;
}
.login-card .signin-btn:hover:not(:disabled) {
  background-position: 100% 0 !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(6, 182, 212, 0.4);
}
.login-card .signin-btn:active:not(:disabled) {
  transform: scale(0.985);
}
.login-card .signin-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- right column: deep navy accent panel --- */
.login-card .right-section {
  background:
    radial-gradient(600px 320px at 85% 8%, rgba(37, 99, 235, 0.28), rgba(0, 0, 0, 0) 60%),
    radial-gradient(480px 300px at 8% 96%, rgba(20, 184, 200, 0.16), rgba(0, 0, 0, 0) 62%),
    linear-gradient(160deg, #0a1930 0%, #061426 100%) !important;
  border-left: 1px solid rgba(111, 156, 255, 0.14);
  border-radius: 0 !important;
  cursor: default;
  padding: 56px 48px !important;
  align-items: flex-start;
}
.login-card .heading {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin-top: 40px !important;
  margin-bottom: 18px !important;
  background: linear-gradient(100deg, #5c90ff 0%, #22d3ee 60%, #5c90ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: 34px !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.login-card .quote-login {
  color: #9aa5bd;
  opacity: 1 !important;
}
.login-card .bottom-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
.login-card .bottom-card h5 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.login-card .bottom-card .small {
  color: #9aa5bd !important;
  font-size: 12.5px !important;
  line-height: 1.9;
}
/* decorative CDN avatars are off-design for the dark theme */
.login-card .avatars {
  display: none !important;
}

/* --- responsive polish --- */
@media (max-width: 991.98px) {
  .login-card .left-section {
    padding: 36px 24px !important;
  }
  .login-card .right-section {
    padding: 36px 24px !important;
    border-left: none;
    border-top: 1px solid rgba(111, 156, 255, 0.14);
  }
  .login-card .heading {
    margin-top: 8px !important;
    font-size: 26px !important;
  }
}
@media (max-width: 575.98px) {
  .login-full-wrapper {
    padding: 20px 12px !important;
  }
  .login-card {
    border-radius: 18px !important;
  }
  .login-card .heading {
    font-size: 22px !important;
  }
}
/* =====================================================================
   A6 - ERROR PAGES RESTYLE (404 / 500 / offline)
   ---------------------------------------------------------------------
   The compiled app renders its "Oops! Page Not Found", "Internal Server
   Error" and offline screens as .offline-wrapper > div.text-center.shadow
   with inline light styles. This section re-themes them to the dark
   fintech design. Scope: body:has(.offline-wrapper) — panel and login
   pages never use .offline-wrapper, so they are unaffected.
   ===================================================================== */

body:has(.offline-wrapper) {
  background: #020817 !important;
}

.offline-wrapper {
  position: relative;
  background:
    radial-gradient(920px 520px at 88% -10%, rgba(37, 99, 235, 0.17), rgba(0, 0, 0, 0) 60%),
    radial-gradient(720px 480px at -12% 108%, rgba(20, 184, 200, 0.12), rgba(0, 0, 0, 0) 62%),
    linear-gradient(160deg, #020817 0%, #03111f 52%, #061426 100%) !important;
  overflow: hidden;
}

/* faint trading grid over the canvas */
.offline-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.055) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.055) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, black 25%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 42%, black 25%, transparent 78%);
}

/* glass card (inline-styled in the compiled app: background #fff etc.) */
.offline-wrapper > div {
  position: relative;
  z-index: 1;
  max-width: 460px !important;
  padding: 44px 40px !important;
  background: linear-gradient(165deg, rgba(13, 25, 48, 0.9), rgba(4, 12, 26, 0.94)) !important;
  border: 1px solid rgba(111, 156, 255, 0.22) !important;
  border-radius: 24px !important;
  box-shadow:
    0 30px 80px rgba(2, 6, 18, 0.6),
    0 0 60px rgba(37, 99, 235, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.offline-wrapper h2 {
  color: #ffffff !important;
  letter-spacing: -0.01em;
}
.offline-wrapper p {
  color: #8b95ad !important;
  line-height: 1.6;
}

/* primary action: blue -> cyan sweep (beats the JS inline hover recolor) */
.offline-wrapper .btn {
  width: 100%;
  max-width: 300px;
  margin-top: 8px;
  padding: 13px 16px !important;
  border: none;
  border-radius: 14px !important;
  background: linear-gradient(100deg, #2563eb 0%, #06b6d4 52%, #2563eb 100%) !important;
  background-size: 210% 100% !important;
  background-position: 0 0 !important;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35);
  transition: background-position 0.45s ease, transform 0.15s ease, box-shadow 0.3s ease !important;
}
.offline-wrapper .btn:hover {
  background-position: 100% 0 !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(6, 182, 212, 0.4);
}
.offline-wrapper .btn:active {
  transform: scale(0.985);
}