/* Appearance changes neutral surfaces only: trading status colors remain semantic. */
:root { --va-bg:#1e1e1e; --va-surface:#222222; --va-raised:#2a2a2a; --va-border:#4d4d4d; --va-text:#dedede; --va-muted:#b5b5b5; --va-accent:#75baff; --va-font:'Chivo Mono',monospace; --va-mono:'Chivo Mono',monospace; }
html[data-vector-mode=light] { --va-positive:#176b36; --va-negative:#a32332; --va-info:#155a91; --va-warning:#795000; --va-positive-bg:#e1f2e6; --va-negative-bg:#f7dfe3; --va-info-bg:#e1edf9; --va-warning-bg:#fff0bf; }
html[data-vector-mode=light] body :is(.equity-chip-value,.home-ranking-value,.home-ranking-symbol,.funding-chip-number) { color:var(--va-text)!important; }
html[data-vector-mode=light] body :is(.equity-chip-label,.funding-chip-caption,.flatten-row-muted,.flatten-cross-sort-arrow,.flatten-pair-sort-arrow,.flatten-cross-pnl-clear) { color:var(--va-muted)!important; }
html[data-vector-mode=light] body :is(.flatten-mode-group .btn:not(.active-mode),.flatten-pct-group .btn:not(.active-pct),.flatten-cross-pnl-toggle:not(.active)) { color:var(--va-text)!important; }
html[data-vector-mode=light] body .flatten-side-effect-hint--warn { color:var(--va-warning)!important; background:var(--va-warning-bg)!important; }
html[data-vector-mode=light] body .flatten-side-effect-hint--warn .flatten-side-effect-hint__title { color:var(--va-warning)!important; }
html[data-vector-mode=light] body .flatten-side-effect-hint--info { color:var(--va-info)!important; background:var(--va-info-bg)!important; }
html[data-vector-mode=light] body .flatten-side-effect-hint--info .flatten-side-effect-hint__title { color:var(--va-info)!important; }
html[data-vector-mode=light] body :is(.equity-up,.equity-chip-value.equity-up,.home-ranking-value.equity-up) { color:var(--va-positive)!important; }
html[data-vector-mode=light] body :is(.equity-down,.equity-chip-value.equity-down,.home-ranking-value.equity-down) { color:var(--va-negative)!important; }
html[data-vector-mode=light] body :is(.flatten-position-exchange-pill,.flatten-status-badge,.badge-secondary,.status-badge,.prediction-badge) { color:var(--va-text)!important; background:var(--va-raised)!important; border-color:var(--va-border)!important; }
html[data-vector-mode=light] body :is(.flatten-status-badge.completed,.badge-success,.status-running,.prediction-ok) { color:var(--va-positive)!important; background:var(--va-positive-bg)!important; border-color:var(--va-positive)!important; }
html[data-vector-mode=light] body :is(.flatten-status-badge.error,.flatten-status-badge.cancelled,.badge-danger,.status-error) { color:var(--va-negative)!important; background:var(--va-negative-bg)!important; border-color:var(--va-negative)!important; }
html[data-vector-mode=light] body :is(.flatten-status-badge.running,.badge-info,.badge-primary) { color:var(--va-info)!important; background:var(--va-info-bg)!important; border-color:var(--va-info)!important; }
html[data-vector-mode=light] body :is(.badge-warning,.pause-indicator) { color:var(--va-warning)!important; background:var(--va-warning-bg)!important; border-color:var(--va-warning)!important; }
html[data-vector-appearance] { color-scheme:dark; }
html[data-vector-appearance] body { background:var(--va-bg)!important; color:var(--va-text); }
html[data-vector-font] body, html[data-vector-font] body :is(h1,h2,h3,h4,h5,h6,p,span,div,a,button,label,input,select,textarea,summary) { font-family:var(--va-font)!important; }
html[data-vector-font] body :is(table,table *,code,pre,.appearance-sample,.appearance-sample *) { font-family:var(--va-mono)!important; font-variant-numeric:tabular-nums; }
html[data-vector-appearance] body :is(.navbar,.bg-light,.navbar-light .navbar-nav .nav-link) { background:var(--va-bg)!important; color:var(--va-text)!important; }
html[data-vector-appearance] body :is(.card,.card-header,.card-body,.table-responsive,.dropdown-menu,.modal-content,.modal-header,.modal-footer,.list-group-item,.daterangepicker,.daterangepicker .calendar-table) { background:var(--va-surface)!important; color:var(--va-text)!important; border-color:var(--va-border)!important; }
html[data-vector-appearance] body :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea,.form-control,.input-group-text) { background:var(--va-raised)!important; color:var(--va-text)!important; border-color:var(--va-border)!important; }
html[data-vector-appearance] body :is(.dropdown-item,.text-muted,label) { color:var(--va-muted)!important; }
html[data-vector-appearance] body .dropdown-item:hover { background:var(--va-raised)!important; color:var(--va-text)!important; }
html[data-vector-appearance] body :is(table thead th,.table thead th) { background:var(--va-surface)!important; color:var(--va-muted)!important; border-color:var(--va-border)!important; }
html[data-vector-appearance] body .table-striped tbody tr:nth-of-type(odd) td:not(.alert-high):not(.alert-low) { background-color:var(--va-bg)!important; }
html[data-vector-appearance] body .table-striped tbody tr:nth-of-type(even) td:not(.alert-high):not(.alert-low) { background-color:var(--va-surface)!important; }
html[data-vector-appearance] body .table-hover tbody tr:hover td:not(.alert-high):not(.alert-low) { background-color:var(--va-raised)!important; }
html[data-vector-appearance] body a:not(.btn):not(.dropdown-item):not(.nav-link) { color:var(--va-accent); }
/* Accent is for operator actions and selection, not PnL or risk-status colors. */
html[data-vector-appearance] body .btn-primary { background-color:var(--va-accent)!important; border-color:var(--va-accent)!important; color:var(--va-accent-text,#10131a)!important; }
html[data-vector-appearance] body .btn-primary:hover { filter:brightness(.92); }
html[data-vector-appearance] body .btn-primary:focus { box-shadow:0 0 0 .2rem color-mix(in srgb,var(--va-accent) 35%,transparent)!important; }
html[data-vector-appearance] body .btn-outline-primary { color:var(--va-accent)!important; border-color:var(--va-accent)!important; }
html[data-vector-appearance] body .btn-outline-primary:hover,
html[data-vector-appearance] body .btn-outline-primary:active { background-color:var(--va-accent)!important; color:var(--va-accent-text,#10131a)!important; }
html[data-vector-appearance] body :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea,.form-control):focus { border-color:var(--va-accent)!important; box-shadow:0 0 0 .15rem color-mix(in srgb,var(--va-accent) 30%,transparent)!important; }
html[data-vector-appearance] body :is(input[type=checkbox],input[type=radio]) { accent-color:var(--va-accent); }
html[data-vector-appearance] body ::placeholder { color:var(--va-muted)!important; opacity:1; }
html[data-vector-appearance] * { scrollbar-color:var(--va-border) var(--va-bg); }
html[data-vector-appearance] :focus-visible { outline:2px solid var(--va-accent)!important; outline-offset:3px; }
#appearanceDialog { color-scheme:dark; background:var(--va-bg); color:var(--va-text); border:1px solid var(--va-border); border-radius:16px; width:min(720px,calc(100vw - 24px)); max-height:90dvh; padding:24px; overflow:auto; box-shadow:0 24px 100px #0009; }
#appearanceDialog::backdrop { background:#0009; }
#appearanceDialog h2 { font-size:23px; margin:0 0 6px; }
#appearanceDialog h3 { font-size:14px; margin:20px 0 12px; }
#appearanceDialog p { font-size:13px; color:var(--va-muted); margin:4px 0 12px; }
.appearance-heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
#appearanceDialog button { background:var(--va-surface); color:var(--va-text); border:1px solid var(--va-border); border-radius:7px; padding:9px 12px; cursor:pointer; }
#appearanceDialog button:focus-visible,#appearanceDialog select:focus-visible,#appearanceDialog input:focus-visible { outline:2px solid var(--va-accent); outline-offset:3px; }
.appearance-presets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
#appearanceDialog .appearance-preset { text-align:left; padding:10px; font-size:13px; }
#appearanceDialog .appearance-preset[aria-pressed=true] { border-color:var(--va-accent); box-shadow:0 0 0 1px var(--va-accent); }
.appearance-swatches { display:flex; height:26px; overflow:hidden; border-radius:4px; margin-bottom:8px; border:1px solid #ffffff30; }
.appearance-swatches i { flex:1; }
.appearance-saved-themes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.appearance-saved-theme { display:flex; min-width:0; border:1px solid var(--va-border); border-radius:7px; overflow:hidden; background:var(--va-surface); }
#appearanceDialog .appearance-saved-theme-load { flex:1; min-width:0; text-align:left; border:0; border-radius:0; }
.appearance-saved-theme-load strong,.appearance-saved-theme-load small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.appearance-saved-theme-load small { margin-top:4px; color:var(--va-muted); font-size:11px; }
#appearanceDialog .appearance-saved-theme-load[aria-pressed=true] { box-shadow:inset 0 0 0 1px var(--va-accent); }
#appearanceDialog .appearance-saved-theme-remove { flex:none; border:0; border-left:1px solid var(--va-border); border-radius:0; color:var(--va-muted); font-size:12px; }
.appearance-theme-save { display:flex; align-items:end; gap:8px; margin-top:12px; }
.appearance-theme-save label { flex:1; min-width:0; margin:0; }
#appearanceDialog .appearance-theme-save input { width:100%; min-height:44px; border:1px solid var(--va-border); border-radius:6px; padding:8px 10px; background:var(--va-surface); color:var(--va-text); font-size:16px; }
#appearanceDialog .appearance-theme-save button { min-height:44px; white-space:nowrap; }
.appearance-fonts,.appearance-colors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:20px 0; }
.appearance-font-picker { position:relative; }
#appearanceDialog .appearance-font-picker > button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; font-size:16px; min-height:44px; }
.appearance-font-list { margin-top:6px; max-height:230px; overflow:auto; border:1px solid var(--va-border); border-radius:7px; background:var(--va-surface); }
.appearance-font-list[hidden] { display:none; }
#appearanceDialog .appearance-font-option { font-size:18px; font-weight:400; min-height:44px; padding:10px 12px; cursor:pointer; color:var(--va-text); }
#appearanceDialog .appearance-font-option.active,#appearanceDialog .appearance-font-option:hover { background:var(--va-raised); outline:1px solid var(--va-accent); outline-offset:-1px; }
#appearanceDialog .appearance-font-option[aria-selected=true]::after { content:' ✓'; color:var(--va-accent); }
#appearanceDialog label { display:flex; flex-direction:column; gap:8px; color:var(--va-muted); font-size:13px; }
#appearanceDialog select { width:100%; padding:10px; font-size:16px; background:var(--va-surface); color:var(--va-text); border:1px solid var(--va-border); border-radius:6px; }
#appearanceDialog summary { cursor:pointer; font-size:14px; }
.appearance-colors { grid-template-columns:repeat(3,minmax(0,1fr)); }
#appearanceDialog input[type=color] { width:100%; height:40px; background:var(--va-surface); border:1px solid var(--va-border); }
.appearance-sample { display:flex; flex-wrap:wrap; gap:16px; padding:16px; margin:20px 0; background:var(--va-surface); border:1px solid var(--va-border); border-radius:8px; font-size:13px; }
.appearance-profit { color:#7bea8b; }.appearance-loss { color:#ff9999; }.appearance-warning { color:#ffd166; }
.appearance-footer { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#appearanceDialog .appearance-footer p { flex:1 1 170px; margin:0; }
#appearanceDialog #appearanceSave { background:var(--va-accent); color:var(--va-accent-text,#10131a); border-color:transparent; font-weight:600; }
@media(max-width:540px) { #appearanceDialog { padding:16px; }.appearance-presets { grid-template-columns:repeat(2,minmax(0,1fr)); }.appearance-saved-themes { grid-template-columns:1fr; }.appearance-fonts { grid-template-columns:1fr; } }
.appearance-icon-packs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#appearanceDialog .appearance-icon-pack { text-align:left; padding:14px; min-height:126px; }
.appearance-icon-pack strong,.appearance-icon-pack small { display:block; }
.appearance-icon-pack small { margin-top:6px; color:var(--va-muted); font-size:12px; }
.appearance-icon-preview { display:flex; align-items:center; gap:14px; min-height:34px; margin-bottom:10px; color:var(--va-accent); }
.appearance-icon-preview svg { width:23px; height:23px; }
#appearanceDialog .appearance-icon-pack[aria-pressed=true] { border-color:var(--va-accent); box-shadow:0 0 0 1px var(--va-accent); background:var(--va-raised); }
[data-vector-icon] { display:inline-flex; vertical-align:middle; align-items:center; justify-content:center; }
[data-vector-icon] > svg { width:1em; height:1em; flex-shrink:0; }
.vector-home-icon { flex-shrink:0; line-height:1; }
html:not([data-vector-icons=classic]) .navbar-toggler-icon { background-image:none!important; color:var(--va-text); }
html:not([data-vector-icons=classic]) .navbar-toggler-icon svg { width:24px; height:24px; }
.navbar .navbar-section-dropdown-toggle::after { display:none; }
.navbar-menu-chevron { margin-left:.3em; width:.75em; height:.75em; transition:transform .12s ease; }
.navbar-menu-chevron svg { width:100%; height:100%; }
.navbar .navbar-section-dropdown-toggle[aria-expanded=true] .navbar-menu-chevron,
.navbar-nav > .dropdown:hover > .navbar-section-dropdown-toggle .navbar-menu-chevron { transform:rotate(180deg); }
.vector-disclosure-chevron { flex-shrink:0; transition:transform .12s ease; }
[aria-expanded=true] > .vector-disclosure-chevron { transform:rotate(180deg); }

/* Native selects and disclosure markers share the configured icon pack too. */
html body select:not([multiple]):not([size]),
html body select:not([multiple])[size="1"] {
  appearance:none!important; -webkit-appearance:none!important;
  background-image:var(--va-select-chevron)!important;
  background-repeat:no-repeat!important; background-position:right .65rem center!important;
  background-size:1em 1em!important; padding-right:2rem!important;
}
html body details > summary { list-style:none; }
html body details > summary::-webkit-details-marker { display:none; }
html body details > summary::marker { content:''; }
html body details > summary:not(:has([data-vector-icon=chevron]))::after,
html body .dropdown-toggle:not(.navbar-section-dropdown-toggle):not(.navbar-account-button):not(:has([data-vector-icon=chevron]))::after,
html body [data-toggle=collapse]:not(.navbar-toggler):not(:has([data-vector-icon=chevron]))::after {
  content:''!important; display:inline-block; flex-shrink:0; float:right;
  width:.8em!important; height:.8em!important; margin-left:.65em; vertical-align:middle;
  border:0!important; background:currentColor; font-size:inherit!important; line-height:1;
  mask:var(--va-chevron-mask) center / contain no-repeat;
  -webkit-mask:var(--va-chevron-mask) center / contain no-repeat;
  transform:rotate(0deg)!important;
}
html body details[open] > summary::after,
html body .dropdown-toggle[aria-expanded=true]::after,
html body [data-toggle=collapse][aria-expanded=true]::after { transform:rotate(180deg)!important; }
/* The mask is the selected pack's chevron, shared by all table sort indicators. */
html body table thead th:has(.sort-arrow,.sort-indicator)::after { content:none!important; display:none!important; }
html body table thead th .sort-indicator { font-size:0!important; }
html body table thead th.sortable:not(:has(.sort-arrow)):not(:has(.sort-indicator))::after,
html body table thead th[data-sort-key]:not(:has(.sort-arrow)):not(:has(.sort-indicator))::after,
html body table thead th :is(.sort-arrow,.sort-indicator)::after {
  content:''!important; display:inline-block!important; width:9px!important; height:9px!important;
  margin-left:4px!important; vertical-align:baseline!important; background:currentColor!important;
  mask:var(--va-chevron-mask) center / contain no-repeat!important;
  -webkit-mask:var(--va-chevron-mask) center / contain no-repeat!important;
  opacity:.5;
}
html body table thead th:is(.sort-asc,.is-sort-asc,[data-sort-direction=asc]):not(:has(.sort-arrow)):not(:has(.sort-indicator))::after,
html body table thead th:is(.sort-asc,.is-sort-asc,[data-sort-direction=asc]) :is(.sort-arrow,.sort-indicator)::after { transform:rotate(180deg)!important; opacity:1; }
html body table thead th:is(.sort-desc,.is-sort-desc,[data-sort-direction=desc]):not(:has(.sort-arrow)):not(:has(.sort-indicator))::after,
html body table thead th:is(.sort-desc,.is-sort-desc,[data-sort-direction=desc]) :is(.sort-arrow,.sort-indicator)::after { opacity:1; }
@media(max-width:540px) { .appearance-icon-packs { grid-template-columns:1fr; } #appearanceDialog .appearance-icon-pack { min-height:100px; } }

/* Light presets retain semantic hues, with darker text for bright surfaces. */
html[data-vector-mode=light],html[data-vector-mode=light] #appearanceDialog { color-scheme:light; }
html[data-vector-mode=light] body :is(h1,h2,h3,h4,h5,h6,.section-title,.card-title,.home-metric-label,.home-ranking-title,.table,.table-responsive) { color:var(--va-text)!important; }
html[data-vector-mode=light] body :is(.dashboard-card,.home-metric,.home-ranking,.home-ranking-card,.navbar-toggler) { background:var(--va-surface)!important; color:var(--va-text)!important; border-color:var(--va-border)!important; }
html[data-vector-mode=light] body :is(.dropdown-item:hover,.dropdown-item:focus,.dropdown-item:active) { color:var(--va-text)!important; }
html[data-vector-mode=light] body table :is(td,th):not([style*="color"]):not([class*="alert"]):not(.text-success):not(.text-danger):not(.text-warning) { color:var(--va-text)!important; border-color:var(--va-border)!important; }
html[data-vector-mode=light] body :is(strong,b,#accountDropdown) { color:var(--va-text); }
html[data-vector-mode=light] body [style*="color: rgb(123, 234, 139)"],html[data-vector-mode=light] body [style*="color:#7bea8b"],html[data-vector-mode=light] body [style*="color: #7bea8b"] { color:#176b36!important; }
html[data-vector-mode=light] body [style*="color: rgb(255, 153, 153)"],html[data-vector-mode=light] body [style*="color:#ff9999"],html[data-vector-mode=light] body [style*="color: #ff9999"] { color:#a32332!important; }
html:root[data-vector-mode=light] body table :is(td,th).alert-high { color:#8c1325!important; background-color:#f7dfe3!important; }
html:root[data-vector-mode=light] body table :is(td,th).alert-low { color:#795000!important; background-color:#fff0bf!important; }
html[data-vector-mode=light] body :is(.appearance-profit,.text-success) { color:#176b36!important; }
html[data-vector-mode=light] body :is(.appearance-loss,.text-danger) { color:#a32332!important; }
html[data-vector-mode=light] body :is(.appearance-warning,.text-warning) { color:#855000!important; }
html[data-vector-mode=light] body :is(.home-metric-value,.home-ranking-list,.card-content,.navbar-light .navbar-toggler) { color:var(--va-text); }
html[data-vector-mode=light] .navbar-toggler-icon[data-rendered-icon-pack=classic] { filter:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2317212b' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")!important; }
html[data-vector-mode=light] .appearance-swatches { border-color:var(--va-border); }
html[data-vector-mode=light] body #accountDropdown [data-vector-icon] { color:var(--va-text)!important; }
html[data-vector-mode=light] body #accountDropdown .bi-person-fill { fill:var(--va-text)!important; }

/* Default leaves each page's original sizing intact. Other sizes share a scale. */
html[data-vector-size] body { font-size:var(--va-ui-size); }
html[data-vector-size] body :is(p,label,summary,.nav-link,.dropdown-item,.btn,input,select,textarea,.form-control,.input-group-text,.card-title) { font-size:var(--va-ui-size)!important; }
html[data-vector-size] body :is(h1,h2,h3,h4,h5,h6) { line-height:1.25; }
html[data-vector-size] body h1 { font-size:calc(32px * var(--va-size-scale))!important; }
html[data-vector-size] body h2 { font-size:calc(24px * var(--va-size-scale))!important; }
html[data-vector-size] body h3 { font-size:calc(20px * var(--va-size-scale))!important; }
html[data-vector-size] body :is(h4,h5,h6) { font-size:calc(16px * var(--va-size-scale))!important; }
html[data-vector-size] body table :is(th,td,span,a,button,input,strong,b,code) { font-size:var(--va-table-size)!important; }
html[data-vector-size] body .section-title { font-size:var(--va-ui-size)!important; }
@media(max-width:768px),(any-pointer:coarse) {
  html:root[data-vector-size] body :is(input,select,textarea,[contenteditable]) { font-size:max(16px,var(--va-ui-size))!important; }
  html:root[data-vector-size] body table :is(input,select,textarea,[contenteditable]) { font-size:max(16px,var(--va-table-size))!important; }
}
