/* =========================================================
   Veltrix brand theme: the logo's cyan > blue > violet gradient
   layered on the app's white (day) / black (night) pages.
   Loaded last so it recolours accents without touching layout.
   ========================================================= */
:root{
  --brand:#2450ff;
  --brand-2:#7a3bff;
  --brand-3:#12a7ff;
  --brand-grad:linear-gradient(135deg,#1a86ff 0%,#2450ff 55%,#6d3bff 100%);
  --brand-soft:#eef2ff;
  --brand-soft-2:#e1e8ff;
  --brand-ring:rgba(36,80,255,.22);
  --brand-shadow:0 10px 24px rgba(36,80,255,.28);
  --wd-accent:#2450ff;
}

/* ---------- Sign in / sign up ---------- */
.eyebrow{color:var(--brand)}
.primary-button{background:var(--brand-grad);border-color:transparent;color:#fff;box-shadow:var(--brand-shadow)}
.secondary-button{color:var(--brand)}
.secondary-button svg{color:var(--brand)}
.input-group input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring)}
.switch-auth button,.step-back,.detect-button{color:var(--brand)}
.detect-button:hover,.upload-button,.logout-button:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.password-toggle:hover{color:var(--brand)}
.brand-mark,.section-number,.security-badge,.dashboard-card-icon{background:var(--brand-grad);color:#fff}
.message.success{background:var(--brand)}
.switch input:checked+.slider{background:var(--brand)}
.progress-item.active,.progress-item.completed{color:var(--brand)}
.progress-item.active span,.progress-item.completed span{background:var(--brand);border-color:var(--brand);color:#fff}
.profile-hero{background:var(--brand-grad)}

/* ---------- Dashboard ---------- */
.wd-deposit{background:var(--brand-grad);box-shadow:0 6px 16px rgba(36,80,255,.28)}
.wd-avatar{background:var(--brand-soft);color:var(--brand)}
.wd-icon-btn{color:var(--brand)}
.wd-circle{background:var(--brand-soft);color:var(--brand)}
.wd-circle:active,.wd-circle:hover{background:var(--brand-soft-2)}
.wd-tab.active{color:var(--brand)}
.wd-coin{background:var(--brand-grad)}
.wd-toast{background:#101a4d;color:#fff}
.wd-empty-icon{background:var(--brand-soft);color:var(--brand)}
.wd-amount{color:inherit}

/* ---------- Sheets, deposit, send, security ---------- */
.sd-main,.sx-main,.wd-notification-apply,.wd-detail-buy,.profile-ui-dialog-actions button:last-child{background:var(--brand-grad)!important;color:#fff;box-shadow:var(--brand-shadow)}
.wd-deposit-address-row button,.wd-deposit-back-list{background:var(--brand)!important}
.wd-detail-timeframes button.active{background:var(--brand);color:#fff}
.wd-detail-actions button,.wd-detail-round{background:var(--brand-soft);color:var(--brand)}
.sx-note b,.sx-dev-ic,.sx-dev-big,.sd-auth-ic,.lux-copy{color:var(--brand)}
.sd-input:focus-within,.sx-pin input:focus,.sx-pin input.filled,.profile-ui-dialog-card input:focus{border-color:var(--brand)}
.lux-amt{background:none!important;color:var(--wd-text,#17171c)!important;-webkit-text-fill-color:currentColor;-webkit-background-clip:border-box;background-clip:border-box}
.sd-main.lux-ghost{border:0!important;color:#fff!important;-webkit-text-fill-color:#fff;text-shadow:0 0 10px rgba(255,255,255,.55),0 1px 0 rgba(0,0,0,.12);letter-spacing:.2px}

/* ---------- Profile & settings pages ---------- */
.profile-ui-icon,.profile-ui-field-icon,.profile-ui-top-icon,.profile-ui-back{color:var(--brand)}

/* ---------- Messaging ---------- */
.vm-page,.vm-viewer,.vm-toast{--acc:#2450ff;--me:#2450ff}
.vm-fab,.vm-send,#vmChat .vm-send{background:var(--brand-grad)!important;color:#fff}
.vm-b.me{background:var(--brand-grad);color:#fff}
.vm-tile{background:var(--brand-grad)}
.vm-toast{background:#101a4d;color:#fff}

/* ---------- Language loading spinner ---------- */
#langSpinner .lang-spinner-ring{border-color:rgba(36,80,255,.18);border-top-color:var(--brand)}

/* ---------- Icons without an explicit fill take the brand colour ---------- */
.wd-circle svg:not([fill]),.wd-icon-btn svg:not([fill]),.profile-ui-icon svg:not([fill]),.profile-ui-field-icon svg:not([fill]){fill:currentColor}
.wd-eye,.wd-pnl .wd-caret,.wd-balance .wd-caret{color:var(--brand)}
.wd-stack-kicker{color:var(--brand)}

/* ---------- "Discover more" cards in the logo's colours ---------- */
.card-violet{background:linear-gradient(125deg,#7a3bff,#3a2fe0)}
.card-ink{background:linear-gradient(125deg,#1d2878,#0a0f33)}
.card-mint{background:linear-gradient(125deg,#c4f3ff,#5cd0ff);color:#06324a}
.card-amber{background:linear-gradient(125deg,#f3b4ff,#c04bff);color:#3d0a52}
.card-blue{background:linear-gradient(125deg,#a8c9ff,#3f78ff);color:#0b2358}
.wd-stack-controls>button{color:var(--brand);border-color:var(--brand-soft-2)}
.wd-stack-dot.active,.wd-stack-dot.is-active{background:var(--brand)}
.secondary-button svg:not([fill]){fill:currentColor}

/* ---------- Profile identity card + avatars ---------- */
.profile-ui-identity{background:radial-gradient(120% 140% at 100% 0,rgba(18,200,255,.38),transparent 58%),linear-gradient(125deg,#1f5dff,#3a3bf0 55%,#7a3bff);box-shadow:0 14px 34px rgba(36,80,255,.28)}
.profile-ui-avatar-button{background:rgba(255,255,255,.2);box-shadow:0 0 0 3px #1d36c9,0 0 0 4.5px #a9e4ff}
.profile-ui-avatar-large{background:var(--brand-grad);color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--brand),0 14px 30px rgba(36,80,255,.22)}
.profile-ui-avatar-large i{background:var(--brand-grad);color:#fff}
.profile-ui-bottom-note{background:var(--brand-soft);color:#5b6285}

/* ---------- Notifications page ---------- */
#notificationPage .wd-notification-header .wd-feature-back,#notificationPage .wd-notification-filter{color:var(--brand);background:var(--brand-soft)}
#notificationPage .wd-notification-empty .wd-empty-illustration{background:var(--brand-soft);color:var(--brand)}

/* ---------- Search / deposit coin list ---------- */
.wd-deposit-tabs button.active{background:var(--brand-soft);color:var(--brand)}
.wd-deposit-search-field button{color:var(--brand)}
.wd-deposit-count{color:var(--brand)}


/* =========================================================
   COLOUR ROLES — one meaning per colour
   Brand blue  = the one primary action + interactive controls
   Green       = positive / success / gain
   Red         = error / destructive / loss
   Neutral     = everything that is just a label or decoration
   ========================================================= */
:root{
  --pos:#0f9d58;  --pos-soft:#e6f6ee;
  --neg:#d93a49;  --neg-soft:#fdecee;
  --flat:#7b7d85;
  --ink:#111318;  --ink-2:#5b5f6b;
}

/* ---------- Gains / losses: one green, one red, everywhere ---------- */
.wd-up,.wd-market-values small.up,.wd-deposit-market-row .wd-market-values small.positive{color:var(--pos)}
.wd-down,.wd-market-values small.down,.wd-deposit-market-row .wd-market-values small.negative{color:var(--neg)}
.wd-flat,.wd-market-values small.neutral{color:var(--flat)}
.wd-pill.up{background:var(--pos)}
.wd-pill.down{background:var(--neg)}

/* ---------- Feedback: errors are red, success is green ---------- */
.message.error{background:var(--neg-soft);color:var(--neg);border:1px solid rgba(217,58,73,.35)}
.message.success{background:var(--pos-soft);color:var(--pos);border:1px solid rgba(15,157,88,.35)}
.sd-err,.sd-msg.bad,.sx-error{color:var(--neg)}
.sd-input.bad,.sx-pin.bad input{border-color:var(--neg)}
.sd-msg.good,.sx-checks li.ok{color:var(--pos)}
.sd-input.good{border-color:var(--pos)}
.lux-pill i{background:var(--pos)}
.sx-checks li.ok::before{background:var(--pos);border-color:var(--pos)}
.sx-outline-danger{color:var(--neg);border-color:rgba(217,58,73,.45)}
.profile-ui-logout .profile-ui-icon{background:var(--neg-soft);color:var(--neg)}
.profile-ui-logout .profile-ui-row-copy strong{color:var(--neg)}

/* ---------- Brand blue is for actions, not for labels ---------- */
.eyebrow,.wd-stack-kicker,.wd-deposit-count{color:var(--ink-2)}
.wd-tab.active{color:var(--ink)}                       /* section title, not a link */
.wd-eye,.wd-pnl .wd-caret,.wd-balance .wd-caret{color:var(--flat)}
.wd-icon-btn,.profile-ui-icon,.profile-ui-field-icon{color:var(--ink-2)}  /* scan, bell, row icons: quiet */
.wd-empty-icon,#notificationPage .wd-notification-empty .wd-empty-illustration{background:#f3f4f7;color:var(--flat)}
.wd-avatar{background:#f1f2f5;color:var(--ink)}
.progress-item.active,.progress-item.completed{color:var(--ink)}
.progress-item.active span,.progress-item.completed span{background:var(--brand);border-color:var(--brand)}

/* ---------- Dark mode is a page-wide invert filter; put back the
   surfaces whose colour must NOT flip (same trick the profile card uses) ---------- */
html[data-theme="dark"] .wd-stack-card,
html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .wd-deposit,
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .wd-pill,
html[data-theme="dark"] .wd-coin,
html[data-theme="dark"] .vm-b.me,
html[data-theme="dark"] .vm-fab,
html[data-theme="dark"] .vm-send,
html[data-theme="dark"] .vm-tile,
html[data-theme="dark"] .sd-main,
html[data-theme="dark"] .sx-main,
html[data-theme="dark"] .wd-detail-buy,
html[data-theme="dark"] .wd-txc-go,
html[data-theme="dark"] .message.error,
html[data-theme="dark"] .message.success{filter:hue-rotate(180deg) invert(1)}  /* exact inverse of the page filter */
html[data-theme="dark"] .wd-stack-card{box-shadow:0 18px 40px rgba(0,0,0,.45)}

/* Primary button keeps its brand colour on hover/press (old rule turned it near-black) */
.primary-button:hover,.primary-button:active,.primary-button:focus-visible{background:var(--brand-grad);filter:brightness(1.06);box-shadow:var(--brand-shadow)}
.primary-button:active{filter:brightness(.94)}

/* Primary buttons — the gradient is painted on a layer that is 3px bigger than the button on every side and clipped by the
   button's rounded corners, so it always runs fully to the left, right, top and bottom edges on every screen size and browser
   (no border, no tiled background, no filter halo on the edge pixels). */
.primary-button,.primary-button:hover,.primary-button:active,.primary-button:focus-visible{position:relative;overflow:hidden;isolation:isolate;border:0 !important;outline:0;background:transparent !important;background-image:none !important}
.primary-button::before{content:"";position:absolute;inset:-3px;z-index:-1;pointer-events:none;background:var(--brand-grad)}
/* night mode: the page itself is inverted, so the gradient layer carries the inverse filter and the label is authored black (shows white) */
html[data-theme="dark"] .primary-button,html[data-theme="dark"] .primary-button:hover,html[data-theme="dark"] .primary-button:active,html[data-theme="dark"] .primary-button:focus-visible{filter:none !important;color:#000 !important;box-shadow:0 10px 24px rgba(74,149,255,.28)}
html[data-theme="dark"] .primary-button::before{filter:hue-rotate(180deg) invert(1)}

/* no scrollbar line anywhere (pages still scroll) */
html,body,*{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent}