/* TSP TIPS member surfaces only; investment.tips blob 48da89bb. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
:root {
  color-scheme: light;
  --bg-body: #FFFFFF; --bg-card: #F7F8F6;
  --bg-header: #0E1A14; --bg-disclaimer: #1A2620;
  --text-main: #0E1A14; --text-muted: #4A5650; --text-light: #FFFFFF;
  --border-color: #E4E7E2; --input-border: #CFD4CC;
  --brand-primary: #1B7D52; --brand-primary-hover: #1B7D52;
  --brand-fill: #2BA56D; --brand-fill-hover: #2A9A60; --brand-ink: #0E1A14;
  --shadow-focus: 0 0 0 2px rgba(43,165,109,0.35);
  --font-family-base: 'IBM Plex Sans', sans-serif;
  --gain: #1F8557; --gain-bg: #E7F4EC; --loss: #C4452D; --loss-bg: #FBEDE9;
  --info: #3B6FB8; --info-bg: #E8EFF8;
  --font-mono: 'IBM Plex Mono', monospace;
  --brand-secondary: var(--text-main); --gradient-primary: var(--brand-fill);
  --primary-color: var(--brand-primary); --primary-hover: var(--brand-fill-hover);
  --bg-color: var(--bg-body); --bg-secondary: var(--bg-card);
  --card-bg: var(--bg-card); --input-bg: var(--bg-body);
  /* The independent bridge template uses these existing role names. */
  --page: var(--bg-body); --surface: var(--bg-card); --ink: var(--text-main);
  --muted: var(--text-muted); --action: var(--brand-fill);
  --action-hover: var(--brand-fill-hover); --notice: var(--bg-card);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg-body: #0B130F; --bg-card: #121C16; --bg-header: #121C16;
    --text-main: #ECEFEB; --text-muted: #A6B0AA;
    --border-color: #243029; --input-border: #34423B;
    --brand-primary: #6FD3A2; --brand-primary-hover: #6FD3A2;
    --brand-fill: #39C082; --brand-fill-hover: #4FC890;
    --shadow-focus: 0 0 0 2px rgba(79,200,144,0.45);
    --gain: #4FC890; --gain-bg: #122A1E; --loss: #E37056; --loss-bg: #2A1612;
    --info: #6FA0E5; --info-bg: #14202E;
  }
}
/* Global type only. Provider documents/text and incumbent icon families are excluded. */
:where(html, body, body *):not(:where(.google-signin-button, .google-signin-button *, #appleid-signin, #appleid-signin *, .flot-text, .flot-text *, #stripe_checkout, #stripe_checkout *, .fa, .glyphicon)) {
  font-family: var(--font-family-base) !important;
}
body { background-color: var(--bg-body) !important; }
html, body { color: var(--text-main) !important; }
h1, h2, h3, h4, h5, h6 {
  color: var(--text-main); font-weight: 600 !important; letter-spacing: -0.02em !important;
}
a, .text-primary, .toggle-auth { color: var(--brand-primary) !important; }
.text-muted, .text-muted-custom, .text-tertiary, .lead-text, .account-body h5, small {
  color: var(--text-muted) !important;
}
/* Surface roles: no arbitrary descendant backgrounds or borders are reset. */
.account-body, .card, .card-header, .panel, .panel-heading, .well, .section-card,
.content-library-card, .promo-side, .notice, body > main, .pricing-plan,
.modal-content, .modal-header, .modal-body, .modal-footer, .dropdown-menu,
.bg-light, .bg-white, .bg-primary, .bg-success, .bg-gradient, .bg-gradient-primary,
.bg-gradient-secondary, .pricing-header {
  background-color: var(--bg-card) !important;
  background-image: none !important;
  border-color: var(--border-color) !important;
}
.bg-gradient :is(h1,h2,h3,h4,h5,h6,p,span,i), .pricing-header h3 { color: var(--text-main) !important; }
.navbar, .navbar-inverse, header[role="banner"] { background-color: var(--bg-header) !important; }
.navbar :is(a, .navbar-toggle, .navbar-brand), .navbar-brand h3 { color: var(--text-light) !important; }
.navbar-toggle { border-color: var(--text-light) !important; }
.dropdown-menu a { color: var(--text-main) !important; }
.dropdown-menu .divider { background-color: var(--border-color) !important; }
input:not([type="radio"]):not([type="checkbox"]), textarea, select, .form-control {
  background-color: var(--bg-body) !important; border-color: var(--input-border) !important;
  color: var(--text-main) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
:where(input, textarea, select, button, a):focus-visible {
  outline-color: var(--brand-primary) !important; box-shadow: var(--shadow-focus) !important;
}
/* Fill only the button itself; child carets retain transparent side borders. */
.btn:not(.btn-link), .btn-gradient, .btn-lg:not(.btn-link), body > main button {
  background-color: var(--brand-fill) !important; background-image: none !important;
  color: var(--brand-ink) !important; border-color: var(--brand-fill) !important;
}
.btn:not(.btn-link):hover, .btn-gradient:hover, .btn-lg:not(.btn-link):hover, body > main button:hover {
  background-color: var(--brand-fill-hover) !important; border-color: var(--brand-fill-hover) !important;
}
.btn-default.btn-default, .btn-gradient-secondary.btn-gradient-secondary {
  background-color: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--input-border) !important;
}
.btn-default.btn-default:hover, .btn-gradient-secondary.btn-gradient-secondary:hover { background-color: var(--bg-body) !important; }
/* A borderless secondary control stays distinct from its account card. */
.account-body .btn-default { background-color: var(--bg-body) !important; }
.account-body .btn-default:hover { color: var(--brand-primary) !important; }
.btn-danger.btn-danger, .btn-danger.btn-danger:hover { background-color: var(--bg-body) !important; color: var(--loss) !important; border-color: var(--loss) !important; }
.btn-link, .btn-link:hover, .btn-link:focus { color: var(--brand-primary) !important; background-color: transparent !important; background-image: none !important; border-color: transparent !important; }
/* Disabled controls retain their enabled paint; incumbent opacity is the cue. */
/* Questionnaire answers keep selected and outlined states distinct, including hover. */
.btn-unselected.btn-unselected, .btn-unselected.btn-unselected:hover, .btn-unselected.btn-unselected:focus {
  background-color: transparent !important; background-image: none !important;
  color: var(--brand-primary) !important; border-color: var(--brand-primary) !important;
}
.btn-selected.btn-selected {
  background-color: var(--brand-fill) !important; background-image: none !important;
  color: var(--brand-ink) !important; border-color: var(--brand-fill) !important;
}
/* Billing selection is painted by its existing highlighter, not by its labels. */
.switch-wrapper { background-color: transparent !important; border-color: var(--input-border) !important; }
.switch-wrapper label { color: var(--text-muted) !important; }
.switch-wrapper .highlighter { background-color: var(--brand-fill) !important; }
.switch-wrapper [type="radio"]:checked#annual ~ label[for="annual"],
.switch-wrapper [type="radio"]:checked#monthly ~ label[for="monthly"],
.switch-wrapper [type="radio"]:checked#annualmfw ~ label[for="annualmfw"],
.switch-wrapper [type="radio"]:checked#monthlymfw ~ label[for="monthlymfw"] { color: var(--brand-ink) !important; }
.switch-wrapper label:hover { color: var(--brand-primary) !important; }
.switch-wrapper:has(label:hover) .highlighter { background-color: var(--brand-fill-hover) !important; }
/* Status is semantic, separate from links and primary actions. Warning amber is retained. */
.text-danger, .text-danger:hover, #card-errors { color: var(--loss) !important; }
.text-success, .text-success:hover { color: var(--gain) !important; }
.text-info, .text-secondary { color: var(--info) !important; }
.label-success { background-color: var(--gain-bg) !important; color: var(--text-main) !important; }
.label-info { background-color: var(--info-bg) !important; color: var(--text-main) !important; }
.label-default, .badge { background-color: var(--bg-card) !important; color: var(--text-muted) !important; }
/* Warning glyph amber is retained; its adjacent words carry the meaning on normal cards. */
.disclaimer, .disclaimer-band, .bg-disclaimer, .disclaimer-bar, footer { background-color: var(--bg-disclaimer) !important; }
.disclaimer, .disclaimer *, .disclaimer-band *, .bg-disclaimer *, .disclaimer-bar, .disclaimer-bar *, footer, footer * { color: var(--text-light) !important; }
.pricing-plan-price, .pricing-plan-amount, .tsp-number, time,
#mfw_uopix_percentage, #mfw_btcfx_percentage, #mfw_gvsxx_percentage,
#mfw_buy_sell_date, #current-subscription-term-text, #new-subscription-term-text {
  font-family: var(--font-mono) !important;
}
/* No rules paint .caret, chart canvases, legend swatches, or other drawn shapes. */
::selection { color: var(--brand-ink); background-color: var(--brand-fill); }
/* Legacy hard-coded paint, reached through its semantic container or element. */
h1, h2, h3, h4, h5, h6, .panel-title, .pricing-plan-amount { color: var(--text-main) !important; }
.navbar, .navbar-collapse, footer { border-color: var(--border-color) !important; }
.panel-body { border-top-color: var(--border-color) !important; }
.content-title, .content-title u, .pricing-plan-price, .pricing-plan-details li { border-bottom-color: var(--border-color) !important; }
.close, hr { color: var(--text-muted) !important; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus,
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  background-color: var(--brand-fill) !important; color: var(--brand-ink) !important;
}
.table > thead > tr > th, .table > tbody > tr > td { border-color: var(--border-color) !important; color: var(--text-main) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--bg-card) !important; }
@media (prefers-color-scheme: dark) { .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--bg-card) !important; } }
/* These heading roles take precedence over general heading typography. */
.navbar-brand h3 { color: var(--text-light) !important; }
.pricing-plan-details li { color: var(--text-muted) !important; }