/* Trateck light theme ("Mist", 2026-11-11). Navy (dark) is the default; theme.js puts
   class="light" on <html> for visitors who chose light. Every page names its colours the same
   way (--navy page background, --teal alternate sections, --cream text, --gold accents and solid
   buttons, --steel secondary text) and its see-through colours as --rgb-* triplets, so light is
   mostly those values remapped here. The sun / moon button's look is here too, for both themes. */

html.light {
  color-scheme: light;
  --navy:      #EEF3FA;
  --navy-lt:   #FFFFFF;
  --teal:      #DFE7F3;
  --gold:      #15264C;
  --gold-lt:   #2A3E6A;
  --cream:     #0F1C3A;
  --steel:     #56688A;
  --muted:     #56688A;
  --line:      rgba(29,49,98,0.15);
  --gold-dim:  rgba(21,38,76,0.07);
  --green:     #23845A;
  --green-dim: rgba(35,132,90,0.10);
  --yellow:    #94690A;
  --yellow-dim:rgba(148,105,10,0.10);
  --err:       #C2453A;
  --live:      #15264C;
  --rgb-navy:   238,243,250;
  --rgb-teal:   255,255,255;
  --rgb-grey:   29,49,98;
  --rgb-cream:  15,28,58;
  --rgb-goldlt: 42,62,106;
  --rgb-steel:  86,104,138;
  --rgb-ink:    255,255,255;
}

/* ── The sun / moon button (both themes) */
.theme-slot { display: inline-flex; align-items: center; }
.theme-btn { width: 38px; height: 38px; padding: 0; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(var(--rgb-cream),0.28); background: transparent; color: var(--cream); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s; }
.theme-btn:hover { border-color: var(--cream); }
.theme-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .ic-sun { display: none; }
html.light .theme-btn .ic-sun { display: block; }
html.light .theme-btn .ic-moon { display: none; }

/* ── Light: softer shadows, and the few places that keep their own colours */
html.light body { background: var(--navy); }
html.light ::selection { background: rgba(21,38,76,0.18); }

/* Homepage */
html.light .flip { background: var(--teal); }
html.light .pulse-card, html.light .chat { box-shadow: 0 24px 60px rgba(15,28,58,0.12); }
html.light .clock-nowline { box-shadow: 0 0 10px rgba(21,38,76,0.35); }
html.light .msg.them { background: #E4EBF6; border-color: rgba(29,49,98,0.10); }
html.light .laptop-screen, html.light .phone {   /* device screens stay dark */
  --cream: #F5F7FA; --steel: #8A96A3; --muted: #8A96A3; --gold: #AAB5C1; --gold-lt: #D4DAE1; --live: #F5F7FA;
  --rgb-navy: 15,28,58; --rgb-teal: 29,49,98; --rgb-grey: 170,181,193; --rgb-cream: 245,247,250; --rgb-goldlt: 212,218,225; --rgb-steel: 138,150,163; --rgb-ink: 12,23,48; }

/* Partners page */
html.light .vid-frame { box-shadow: 0 24px 60px rgba(15,28,58,0.16); }
html.light .field.err input, html.light .field.err select, html.light .field.err .seg label { border-color: #C2453A; }
html.light .field .err-msg { color: #C2453A; }

/* Sign up, log in, account: the success line was a pale green made for navy */
html.light .success-note { color: #23845A; }

/* KYC: done steps and uploaded files */
html.light .step-num.done { background: #23845A; border-color: #23845A; color: #FFFFFF; }
html.light .upload-area.has-file { border-color: #23845A; }
html.light .upload-filename { color: #23845A; }

/* ── Narrow phones: logo, language, sun / moon and the back link must fit on one line */
@media (max-width: 480px) {
  .nav-logo img { height: 36px; }
  nav .nav-right { gap: 10px; }
  .theme-btn { width: 34px; height: 34px; }
}
@media (max-width: 400px) {
  .nav-logo img { height: 32px; }
}

/* ── Rounder corners on the client pages: portal, log in, sign up, KYC, account (user 2026-11-11).
   Cards 14px; buttons, fields and the boxes inside cards 10px; small buttons 8px; badges are pills.
   These classes exist only on those pages. Cards with an accent bar clip it to the corner. */
.status-card, .mt5-card, .funding-card, .referral-card, .portal-ad-inner, .txn-banner,
.login-box, .signup-box { border-radius: 14px; }
.status-card, .login-box, .signup-box { overflow: hidden; }
.btn-primary, .btn-outline, .btn-back, .form-submit, .google-btn,
.form-input, .form-select, .phone-code, .upload-area, .global-error, .success-note, .warning-note,
.funding-method-btn, .funding-select, .funding-tab-btn, .funding-input, .funding-phone-display, .funding-soon,
.referral-link-box, .referral-stats, .rejection-reason, .lr-item { border-radius: 10px; }
.copy-btn, .referral-copy-btn, .warning-note button { border-radius: 8px; }
.status-badge, .history-status { border-radius: 999px; }
.skel-card { border-radius: 14px; }

/* ── Show / hide password: the eye button theme.js adds to every password box (both themes) */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { padding-right: 46px !important; }
.pw-eye { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--steel); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pw-eye:hover, .pw-eye:focus-visible { color: var(--cream); }
.pw-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw-eye .ic-eye-off { display: none; }
.pw-eye.on .ic-eye { display: none; }
.pw-eye.on .ic-eye-off { display: block; }