/* ==========================================================================
   BioMaint Unified Theme (Light/Dark)
   - Bootstrap 5 theming via [data-bs-theme]
   - Matches marketing (webApp.html) and Blazor app
   - Login page, toast popup, animations included
   ========================================================================== */

/* ============================ TOKENS (DARK DEFAULT) ====================== */
:root{
  /* Brand & focus */
  --brand:#10B981;
  --brand-600:#0EA371;
  --focus:#22d3ee;

  /* Core surfaces/text (dark default) */
  --surface:#111315;
  --surface-2:#0B0B0F;
  --text:#EDEDED;
  --muted:#9aa3ad;
  --card:#15181c;
  --border:#21262c;

  /* Accents */
  --blue:#60A5FA;
  --violet:#A78BFA;
  --teal:#5eead4;
  --pink:#f472b6;

  /* Elevation + legacy aliases */
  --elev: 0 10px 30px rgba(0,0,0,.18);
  --elev-lg: 0 18px 48px rgba(0,0,0,.22);
  --shadow-2: var(--elev);
  --shadow-3: var(--elev-lg);

  /* Scrollbar */
  --sb-thumb: rgba(120,120,120,.35);
  --sb-track: transparent;

  /* Component aliases */
  --accent: var(--brand);
  --accent-hover: var(--brand-600);
  --accent-contrast: #ffffff;
  --secondary: #1e1e20;
  --secondary-contrast: #e5e5e5;
  --success:#15803d;  --success-contrast:#ffffff;
  --info:#115e59;     --info-contrast:#ffffff;
  --warning:#ea8a11;  --warning-contrast:#171717;
  --danger:#ef4444;   --danger-contrast:#ffffff;

  /* Focus ring (thinner) */
  --focus-ring-color: rgba(16,163,127,.35);
  --focus-ring: 0 0 0 .15rem var(--focus-ring-color);

  /* Login inner panel (dark) */
  --panel:#161a1e;
  --panel-border:#2a2f36;

  /* GLOBAL field tokens (used by all textboxes/selects) */
  --field-bg:#161a1e;          /* soft charcoal, not full black */
  --field-chip-bg:#12161b;     /* chip/icon pieces in groups */
  --field-border:#2a2f36;

  /* Legacy helper */
  --bg: var(--surface);
}

/* ================================ LIGHT ================================== */
html[data-bs-theme="light"]{
  color-scheme: light;
  --surface:#ffffff;           /* page + cards stay white */
  --surface-2:#F7F8FA;
  --text:#0B0D0F;
  --muted:#5b6672;
  --card:#ffffff;
  --border:#E6E9ED;
  --bg: var(--surface);

  --elev: 0 10px 26px rgba(2,6,23,.10);
  --elev-lg: 0 18px 40px rgba(2,6,23,.12);
  --shadow-2: var(--elev);
  --shadow-3: var(--elev-lg);

  --sb-thumb: rgba(120,120,120,.35);
  --sb-track: transparent;

  --text-muted:#6b7280;
  --text-subtle:#9ca3af;

  /* Panel + fields are white in light */
  --panel:#ffffff;
  --panel-border:#E6E9ED;

  --field-bg:#ffffff;
  --field-chip-bg:#F7F8FA;
  --field-border:#E6E9ED;
}

/* ================================ DARK =================================== */
html[data-bs-theme="dark"]{
  color-scheme: dark;
  --text-muted:#c7c7c7;
  --text-subtle:#a1a1aa;
  --scrollbar-track:#111315;
  --scrollbar-thumb:#2a2a2a;
}

/* =========================== GLOBAL & TYPOGRAPHY ========================= */
html,body{height:100%}
html{ background:var(--surface); }
body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  overflow-x:hidden;
  overscroll-behavior-x: none;
}
a{ color:var(--accent); text-decoration:none }
a:hover{ color:var(--accent-hover) }

section{ padding:72px 0 }
@media (max-width:576px){ section{ padding:48px 0 } }
.section-sub{ color:var(--muted) }
.muted{ color:var(--muted) }

section h2{
  font-weight: 500;
  letter-spacing: normal;
  font-size: clamp(26px, 2.3vw + 12px, 42px);
  line-height: 1.15;
  text-wrap: balance;
}
section h2 + .section-sub{
  font-size: clamp(16px, 0.75vw + 13px, 20px);
}

::selection{ background: var(--accent); color: #fff }
::-moz-selection{ background: var(--accent); color: #fff }

/* Scrollbars */
*::-webkit-scrollbar{ width:12px; height:12px }
*::-webkit-scrollbar-track{ background: var(--sb-track) }
*::-webkit-scrollbar-thumb{
  background-color: var(--sb-thumb);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
@supports (scrollbar-color: auto){ html{ scrollbar-color: var(--sb-thumb) transparent; } }
@supports selector(::-webkit-scrollbar) and (-webkit-appearance:none) {
  body::-webkit-scrollbar{ width:0 !important; height:0 !important; }
}

/* Focus ring */
:focus-visible{ outline:none; box-shadow: var(--focus-ring) }
.focus-ring:focus{ outline:3px solid var(--focus); outline-offset:2px }

/* Surfaces & helpers */
.surface{ background: var(--surface); border:1px solid var(--border); border-radius:.75rem }
.surface-2{ background: var(--surface-2); border:1px solid var(--border); border-radius:.75rem }
.card-like{ background:var(--surface); border:1px solid var(--border); border-radius:1rem; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 1px 1px rgba(0,0,0,.06) }
.section-bg{ background: var(--surface-2) }

/* ======================= BOOTSTRAP VARIABLE OVERRIDES ==================== */
:root, html[data-bs-theme="light"], html[data-bs-theme="dark"]{
  --bs-body-bg: var(--surface);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);

  --bs-primary: var(--accent);
  --bs-secondary: var(--secondary);
  --bs-success: var(--success);
  --bs-info: var(--info);
  --bs-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-light: var(--surface-2);
  --bs-dark: var(--secondary);

  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-hover);

  --bs-card-bg: var(--surface);
  --bs-card-color: var(--text);
  --bs-card-border-color: var(--border);
  --bs-card-cap-bg: var(--surface-2);

  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-striped-bg: color-mix(in srgb, var(--surface) 90%, black);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: color-mix(in srgb, var(--surface) 86%, black);
  --bs-table-hover-color: var(--text);
  --bs-table-border-color: var(--border);

  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--surface) 92%, black);

  --bs-modal-bg: var(--surface);
  --bs-modal-color: var(--text);
  --bs-modal-border-color: var(--border);
  --bs-modal-header-border-color: var(--border);
  --bs-modal-footer-border-color: var(--border);

  --bs-nav-link-color: var(--text);
  --bs-nav-link-hover-color: var(--accent);
  --bs-nav-tabs-link-hover-border-color: var(--border);
  --bs-nav-tabs-link-active-color: var(--accent);
  --bs-nav-tabs-link-active-bg: var(--surface);
  --bs-nav-tabs-border-color: var(--border);

  --bs-pagination-color: var(--accent);
  --bs-pagination-hover-color: var(--accent-hover);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-bg: var(--surface-2);
  --bs-pagination-hover-border-color: var(--border);
  --bs-pagination-active-bg: var(--accent);
  --bs-pagination-active-border-color: var(--accent);
}

/* Buttons */
.btn{ border-radius:.75rem; font-weight:600 }
.btn-primary{
  --bs-btn-color: var(--accent-contrast);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-focus-shadow-rgb: 16,163,127;
}
.btn-outline-primary{
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-color: var(--accent-contrast);
  --bs-btn-hover-border-color: var(--accent);
}
.btn-outline-light{ border-color:#cbd5e1; color:#cbd5e1 }
.btn-outline-light:hover{ background:#1f2937; color:var(--brand) }
html[data-bs-theme="light"] .btn-outline-light:hover{ background:#EEF2F7; color:var(--brand) }

/* Alerts (soft tints) */
.alert-primary { --bs-alert-bg: color-mix(in srgb, var(--accent) 12%, var(--surface)); --bs-alert-border-color: var(--accent); --bs-alert-color: var(--text) }
.alert-success { --bs-alert-bg: color-mix(in srgb, var(--success) 12%, var(--surface)); --bs-alert-border-color: var(--success); --bs-alert-color: var(--text) }
.alert-info    { --bs-alert-bg: color-mix(in srgb, var(--info) 12%, var(--surface));    --bs-alert-border-color: var(--info);    --bs-alert-color: var(--text) }
.alert-warning { --bs-alert-bg: color-mix(in srgb, var(--warning) 18%, var(--surface)); --bs-alert-border-color: var(--warning); --bs-alert-color: var(--warning-contrast) }
.alert-danger  { --bs-alert-bg: color-mix(in srgb, var(--danger) 12%, var(--surface));  --bs-alert-border-color: var(--danger);  --bs-alert-color: var(--text) }
.alert-danger-solid{ background:var(--danger); color:var(--danger-contrast); border:1px solid var(--danger) }

/* Badges */
.badge.bg-primary{ background:var(--accent)!important; color:var(--accent-contrast)!important }
.badge.bg-success{ background:var(--success)!important; color:var(--success-contrast)!important }
.badge.bg-warning{ background:var(--warning)!important; color:var(--warning-contrast)!important }
.badge.bg-danger { background:var(--danger)!important;  color:var(--danger-contrast)!important }

/* Forms (GLOBAL textboxes/selects now use field tokens) */
.form-control,
.form-select,
.form-check-input,
.input-group-text,
.form-control:disabled,
.form-select:disabled{
  color:var(--text);
  background-color:var(--field-bg);
  border-color:var(--field-border);
}
.input-group-text{ background-color: var(--field-chip-bg); }
.form-control::placeholder{ color:var(--text-subtle); opacity:1 }
.form-control:focus, .form-select:focus{
  color:var(--text);
  background-color:var(--field-bg);
  border-color:var(--accent);
  box-shadow: var(--focus-ring);
}
.form-check-input:checked{ background-color:var(--accent); border-color:var(--accent) }

/* === GLOBAL – unified sizing & input-group alignment ==================== */
:root{
  --ctrl-h: 48px;
  --ctrl-pad-y: 10px;
  --ctrl-pad-x: 14px;
  --ctrl-radius: 12px;
}
.form-control:not(textarea),
.input-group > .form-control:not(textarea),
.form-select {
  min-height: var(--ctrl-h);
  padding: var(--ctrl-pad-y) var(--ctrl-pad-x);
  line-height: 1.2;
  border-radius: var(--ctrl-radius);
}
.input-group-text,
.input-group .btn {
  min-height: var(--ctrl-h);
  padding: 0 var(--ctrl-pad-x);
  background: var(--field-chip-bg);
  border-color: var(--field-border);
}
.input-group > .form-control:not(:first-child){
  border-top-left-radius:0; border-bottom-left-radius:0; border-left:0;
}
.input-group > .form-control:not(:last-child){
  border-top-right-radius:0; border-bottom-right-radius:0; border-right:0;
}

/* Blazor validation */
.validation-message{ color:var(--danger); font-size:.85rem; margin-top:.25rem }
.input-validation-error, .is-invalid{ border-color:var(--danger)!important; background-image:none!important }
.valid.modified:not([type=checkbox]){ border-color:var(--success) }
.invalid.modified:not([type=checkbox]){ border-color:var(--danger) }

/* Cards, Tables */
.card{ background:var(--surface); color:var(--text); border-color:var(--border); border-radius:1rem; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 1px 1px rgba(0,0,0,.06) }
.card .card-header,.card .card-footer{ background:var(--surface-2); border-color:var(--border) }
.table{ color:var(--text) }
.table> :not(caption)>*>*{ background-color:transparent; border-color:var(--border) }
.table-striped>tbody>tr:nth-of-type(odd)>*{ background-color: var(--bs-table-striped-bg) }
.table-hover>tbody>tr:hover>*{ background-color: var(--bs-table-hover-bg) }

/* Dropdowns */
.dropdown-menu{
  background:var(--surface);
  color:var(--text);
  border-color:var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.12);
}
.navbar .dropdown-menu{ background: var(--surface-2) }
.dropdown-menu .dropdown-item{ color:var(--text) }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  color: var(--text);
}
.dropdown-item.active, .dropdown-item:active{
  color: var(--accent-contrast);
  background: var(--accent);
}
@supports not (color: color-mix(in srgb, white 50%, black 50%)){
  .dropdown-menu .dropdown-item:hover,
  .dropdown-menu .dropdown-item:focus{ background: var(--surface); color: var(--text) }
  .navbar .dropdown-menu{ background: var(--surface) }
}

/* Modal, Popover, Tooltip, Toast, Progress */
.modal-content{ background:var(--surface); color:var(--text); border-color:var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.12) }
.popover{ background:var(--surface); color:var(--text); border-color:var(--border) }
.tooltip .tooltip-inner{ background:var(--secondary); color:var(--secondary-contrast) }
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before{ border-top-color: var(--secondary) }
.toast{ background:var(--surface); color:var(--text); border-color:var(--border) }
.progress{ background:var(--surface-2) }
.progress-bar{ background:var(--accent) }

/* Code / mark */
code,pre{ background:var(--surface-2); border:1px solid var(--border); border-radius:.375rem }
code{ color: var(--pink) }
mark{ background: color-mix(in srgb, var(--accent) 30%, transparent); color:var(--text) }

/* Pagination */
.pagination .page-link{ border-color:var(--border) }
.pagination .page-item .page-link{ border-radius:.375rem }

/* =========================== PUBLIC LAYOUT CHROME ======================== */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto; z-index:1000;
  background:var(--accent); color:var(--accent-contrast);
  padding:.5rem .75rem; border-radius:.5rem;
}

/* Header (sticky + translucent) */
header, .bm-header, .navbar.sticky-top{
  position: sticky; top:0; z-index:1030;
  backdrop-filter: saturate(180%) blur(10px);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-bottom: 1px solid var(--border);
  transition: background .3s ease, box-shadow .3s ease;
}
.bm-header.scrolled, .navbar.sticky-top.scrolled, header.scrolled{
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 1px 1px rgba(0,0,0,.06);
  background: var(--surface);
}

.brand-logo{ width:28px; height:28px; border-radius:.5rem }
.brand-logo.small{ width:22px; height:22px }
.brand-text{ color:var(--text); font-weight:700; font-size:1.125rem }

.nav-link{ color:var(--text); opacity:.9; padding:.5rem .25rem }
.nav-link:hover,.nav-link:focus{ color:var(--accent); opacity:1 }
.navbar .nav-link.active{
  color:var(--accent); font-weight:600; position:relative;
}
.navbar .nav-link.active::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:.25rem;
  height:2px; background:var(--accent); border-radius:2px;
}

/* Offcanvas */
.offcanvas, .offcanvas-header, .offcanvas-body{
  color:var(--text); background:var(--surface); border-color:var(--border);
}
.offcanvas .nav-link{ color:var(--text) }
.offcanvas .nav-link:hover{ color:var(--accent) }
.offcanvas hr{ border-color:var(--border) }

/* Navbar (marketing translucent variant) */
.navbar{
  background: rgba(13,16,19,.7)!important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
html[data-bs-theme="light"] .navbar{ background: rgba(255,255,255,.85)!important }
.navbar .nav-link{ color:var(--text) }

/* Theme button + hamburger */
.theme-btn{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  width:42px; height:38px; border-radius:10px;
  display:grid; place-items:center;
}
.bm-toggler{
  border:1px solid var(--border);
  background:var(--card);
  width:44px; height:38px; border-radius:10px;
  display:grid; place-items:center; padding:0;
}
.bm-toggler:focus{ outline:3px solid var(--focus); outline-offset:2px }
.bm-burger, .bm-burger::before, .bm-burger::after{
  content:""; position:relative; display:block; width:22px; height:2px;
  background:var(--text);
  transition: transform .25s ease, top .25s ease, opacity .2s ease, background .2s ease;
}
.bm-burger::before, .bm-burger::after{ position:absolute; left:0 }
.bm-burger::before{ top:-7px } .bm-burger::after{ top:7px }
.bm-toggler.open .bm-burger{ background:transparent }
.bm-toggler.open .bm-burger::before{ top:0; transform:rotate(45deg) }
.bm-toggler.open .bm-burger::after{  top:0; transform:rotate(-45deg) }

/* Make Bootstrap toggler icon readable on both themes */
.navbar .navbar-toggler{ border-color: var(--border) }
html[data-bs-theme="light"] .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(23,23,23,0.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html[data-bs-theme="dark"] .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(229,229,229,0.9)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Footer */
footer{
  background:var(--surface-2);
  color:var(--muted);
  border-top:1px solid var(--border);
  padding-top:40px;
}
.footer-col h6{ color:var(--text); margin-bottom:12px }
.footer-col a{ color:var(--muted); text-decoration:none }
.footer-col a:hover{ color:var(--brand) }

/* ========================== MARKETING SECTIONS =========================== */
/* HERO demo mock */
.hero .mock{
  background:linear-gradient(180deg,#1b1f24,#14171a);
  border:1px solid var(--border);
  border-radius:1rem;
}
html[data-bs-theme="light"] .hero .mock{
  background:linear-gradient(180deg,#f3f5f7,#e9edf1);
}

/* Feature & Solution cards */
.feature-card,.solution-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  height:100%;
  padding:24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.feature-icon{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; margin-bottom:12px;
  background:rgba(16,185,129,.12); color:var(--brand);
  font-size:22px;
}
.card-ghost{ background:var(--card); border:1px dashed var(--border); border-radius:12px; color:var(--muted) }

.feature-card:hover, .feature-card:focus-within{
  transform: translateY(-6px);
  box-shadow: var(--elev-lg);
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(135deg, rgba(16,185,129,.35), rgba(96,165,250,.35)) border-box;
  border:1px solid transparent;
}

/* KPI band */
.kpi-band{ background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.kpi-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:26px 22px;
  box-shadow: var(--elev);
}
.kpi-value{ font-size:48px; line-height:1; font-weight:800; letter-spacing:-.03em; color:var(--brand) }
.kpi-text{ color:var(--muted) }

/* Testimonials */
.testi-head em{ color:var(--brand); font-style:normal }
.testi-wrap{ position:relative }
.testi-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px;
}
@media (max-width: 767.98px){
  .testi-track{ scrollbar-width:none }
  .testi-track::-webkit-scrollbar{ display:none }
}
.testi-card{
  min-width:320px; max-width:520px; flex:0 0 auto;
  scroll-snap-align:start;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px; padding:22px;
}
@media (min-width:992px){ .testi-card{ min-width:540px } }
.testi-user{ display:flex; align-items:center; gap:12px; margin-bottom:10px }
.testi-user img{ width:44px; height:44px; border-radius:50%; object-fit:cover }
.testi-ctrl{ display:flex; gap:10px }
.ctrl-btn{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  border:1.8px solid var(--brand);
  background:transparent; color:var(--brand);
}
.ctrl-btn:hover{ background:var(--brand); color:#fff }

/* Pills */
.nav-pills .nav-link{
  border:1px solid var(--border);
  color:var(--text);
  background:transparent;
}
.nav-pills .nav-link.active{
  background:var(--brand);
  border-color:var(--brand);
}

/* App download & social band */
.promo-band{
  background:var(--surface-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:36px 0;
}
.store-badges img{ height:42px }
.social a{ color:var(--text); opacity:.85 }
.social a:hover{ color:var(--brand) }

/* Floating Chatbot */
.chatbot-btn{
  position:fixed; right:22px; bottom:22px; z-index:1050;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:var(--brand);
  box-shadow: var(--elev); border:0;
}
.chatbot-btn:hover{ background:var(--brand-600) }

/* “Work anywhere” orb background */
.orb-bg{ position:relative; z-index:0; overflow:hidden }
.orb-bg::after{
  content:""; position:absolute; inset:-40px 0 auto auto; z-index:-1;
  width:360px; height:360px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(16,185,129,.25), transparent 70%);
  filter: blur(10px); opacity:.7; transform: translate(0,-20px);
  pointer-events:none;
}
.glow-card{
  position:relative; border-radius:18px; padding:0;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(135deg, rgba(16,185,129,.35), rgba(96,165,250,.35), rgba(167,139,250,.35)) border-box;
  border:1px solid transparent;
  box-shadow: var(--elev);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.glow-card:hover{ transform: translateY(-6px); box-shadow: var(--elev-lg) }
.floaty{ animation: floaty 6s ease-in-out infinite }
@keyframes floaty{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }

/* Platform icons */
.platform-icons{ position:relative; width:100%; height:100% }
.platform-icon{
  position:absolute; display:grid; place-items:center; gap:6px;
  padding:12px 16px; border-radius:14px; font-weight:700;
  box-shadow: var(--elev); backdrop-filter: blur(4px);
}
.platform-icon .bi{ font-size:50px; line-height:1 }
.pi-win{ top:10%; left:8%; color:var(--blue); background:rgba(96,165,250,.1); border:1px solid rgba(96,165,250,.35) }
.pi-and{ bottom:12%; left:24%; color:var(--brand); background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.35) }
.pi-web{ top:18%; right:8%; color:var(--violet); background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.35) }
.pi-ios{ top:36%; left:46%; color:#fff; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.25) }
.platform-icon span{ font-size:.85rem; color:var(--text); opacity:.92 }

/* Analytics metric cards */
.metric-card{
  --ringA: rgba(96,165,250,.55);
  --ringB: rgba(16,185,129,.55);
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(135deg, var(--ringA), var(--ringB)) border-box;
  border:1px solid transparent; border-radius:18px;
  padding:22px; height:100%;
  box-shadow: var(--elev);
  transition: transform .25s ease, box-shadow .25s ease;
}
.metric-card:hover{ transform: translateY(-6px); box-shadow: var(--elev-lg) }
.metric-title{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.metric-ico{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:rgba(16,185,129,.12); color:var(--brand); font-size:18px;
}
.sparkline{ width:100%; height:64px }
.metric-note{ color:var(--muted); font-size:.925rem }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(16px) }
.reveal.in{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease }

/* Micro features */
.micro-features{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
.micro{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px; font-weight:600;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(135deg, rgba(16,185,129,.35), rgba(96,165,250,.35)) border-box;
  border:1px solid transparent;
}
.micro i{ font-size:18px; color:var(--brand) }
.micro small{ color:var(--muted); font-weight:500 }

/* Mobile layout for platform icons */
@media (max-width:576px){
  .platform-icons{
    display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
    align-content:center; justify-items:center; gap:14px; padding:18px;
  }
  .platform-icon{ position:static }
  .orb-bg::after{ width:280px; height:280px }
}

/* Header stacking */
.bm-header { backdrop-filter: saturate(160%) blur(6px); border-bottom: 1px solid var(--border); z-index: 1100; }
.bm-header .container { overflow: visible; }

/* Navbar dropdown animation */
.navbar .dropdown .dropdown-menu.animate-dd{ opacity:0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
.navbar .dropdown.show .dropdown-menu.animate-dd{ opacity:1; transform: translateY(0); }
.navbar .dd-caret{ transition: transform .18s ease; }
.navbar .dropdown.show > .nav-link .dd-caret{ transform: rotate(180deg); }
.dropdown-item > .bi{ width:1.1rem; text-align:center; }
.navbar .container{ overflow: visible; }

/* Theme dropdown width on mobile */
@media (max-width: 991.98px){
  .navbar #themeMenu { width:100%; min-width:100%; --bs-dropdown-min-width:100%; }
}

/* ============================== LOGIN PAGE =============================== */
/* DeepSeek-like floating card centered; works both themes */
.bm-login-wrap{
  min-height:100svh;
  width:100%;
  display:flex;
  align-items:center !important;
  justify-content:center !important;
  padding:20px 10px;
}

.bm-login-card{
  width:100%;
  max-width:440px !important;
  background:var(--panel);            /* full-color panel (dark & light) */
  border:1px solid var(--panel-border);
  border-radius:16px;
  box-shadow:var(--shadow-2);
  padding:28px 16px 32px !important;
  position: relative;
}
/* content above any decorative layer */
.bm-login-card > *{ position: relative; z-index: 1; }
/* remove inner layer to avoid “double border” */
.bm-login-card::before{ content:none; }

/* === Inputs/buttons — DeepSeek-like sizing & seamless joins ============= */
.bm-login .input-group .form-control{
  background:var(--field-bg);
  color:var(--text);
  border-color:var(--field-border);
  height:48px;
  padding:10px 14px;
  border-radius:12px;
  line-height:1.2;
}
.bm-login .input-group-text{
  background:var(--field-chip-bg);
  color:var(--text-muted);
  border-color:var(--field-border);
  height:48px;
  padding:0 14px;
  border-right:0;
  border-radius:12px 0 0 12px;
}
.bm-login .input-group .btn{
  background:var(--field-chip-bg);
  color:var(--text);
  border-color:var(--field-border);
  height:48px;
  padding:0 14px;
  border-left:0;
  border-radius:0 12px 12px 0;
}

/* Remove inner borders & fix radii depending on position */
.bm-login .input-group > .form-control:not(:first-child){
  border-top-left-radius:0; border-bottom-left-radius:0; border-left:0;
}
.bm-login .input-group > .form-control:not(:last-child){
  border-top-right-radius:0; border-bottom-right-radius:0; border-right:0;
}

/* Vertical rhythm like DeepSeek */
.bm-login .form-label{ margin-bottom:6px !important; }
.bm-login .input-group{ margin-top:0 !important; }
.bm-login .validation-message{ margin-top:6px; }

/* Medium phones */
@media (max-width: 576px){
  .bm-login-card{ padding-left:14px !important; padding-right:14px !important; }
  .bm-login .input-group .form-control,
  .bm-login .input-group-text,
  .bm-login .input-group .btn{ height:46px; }
}

/* Very narrow phones */
@media (max-width: 360px){
  .bm-login-wrap{ padding:16px 8px; }
  .bm-login-card{ border-radius:12px; padding:24px 12px 28px !important; }
}

/* Hide native Edge/IE password reveal & clear (avoid double-eye) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{ display:none; }

/* Login card entrance animation */
.bm-anim-fadeup{ animation: bmFadeUp .4s ease-out both; }
@keyframes bmFadeUp{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} }

/* Soften inline validation text on login only */
.bm-login .validation-message{
  color: color-mix(in srgb, var(--danger) 45%, var(--text));
  font-size:12px;
  margin-top:6px;
}

/* ========================= THEME-AWARE TOAST POPUP ======================= */
.bm-toast{
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  display: flex; align-items: center; gap: 10px;
  min-width: min(92vw, 520px); max-width: 92vw;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-2);
  animation: bmToastIn .28s ease-out both, bmToastHold 3.4s linear .28s both;
}
@keyframes bmToastIn{ from{ opacity:0; transform:translate(-50%,-10px);} to{ opacity:1; transform:translate(-50%,0);} }
@keyframes bmToastHold{ from{ opacity:1;} to{ opacity:1;} }

.bm-toast-icon i{ font-size:18px; display:inline-block; }
.bm-toast-close{ margin-left:auto; background:transparent; border:0; color:var(--text-muted); padding:4px; cursor:pointer; }
.bm-toast .bm-toast-body{ font-size:14px; line-height:1.35; }

/* Toast kinds */
.bm-toast-danger{
  background: color-mix(in srgb, var(--surface) 88%, var(--danger));
  border-color:  color-mix(in srgb, var(--border) 70%, var(--danger));
}
.bm-toast-danger .bm-toast-icon i{ color: var(--danger); }

.bm-toast-info{
  background: color-mix(in srgb, var(--surface) 88%, var(--accent));
  border-color:  color-mix(in srgb, var(--border) 70%, var(--accent));
}
.bm-toast-info .bm-toast-icon i{ color: var(--accent); }

.bm-toast-success{
  background: color-mix(in srgb, var(--surface) 88%, #28a745);
  border-color:  color-mix(in srgb, var(--border) 70%, #28a745);
}
.bm-toast-success .bm-toast-icon i{ color: #28a745; }

/* ===================== ACCESSIBILITY & MOTION PREFS ====================== */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation-duration:.01ms !important }
}
@media (prefers-contrast: more){
  :root{
    --border: color-mix(in srgb, var(--border) 70%, white);
    --focus-ring-color: color-mix(in srgb, var(--accent) 60%, white);
  }
}

/* ===================== BLAZOR UI (ESSENTIALS ONLY) ======================= */
/* Error UI (bottom banner) */
#blazor-error-ui{
  background: color-mix(in srgb, #facc15 18%, var(--surface));
  color:#3b2f00;
  bottom:0; left:0; right:0; position:fixed; display:none;
  border-top:1px solid color-mix(in srgb, #facc15 40%, var(--surface));
  padding:.6rem 1.25rem .7rem 1.25rem; z-index:1000;
  box-shadow: 0 -1px 2px rgba(0,0,0,.2);
}
#blazor-error-ui .dismiss{ cursor:pointer; position:absolute; right:.75rem; top:.5rem }

/* Loading ring */
.loading-progress{ position:relative; display:block; width:8rem; height:8rem; margin:20vh auto 1rem auto }
.loading-progress circle{ fill:none; stroke: #e0e0e0; stroke-width:.6rem; transform-origin:50% 50%; transform: rotate(-90deg) }
.loading-progress circle:last-child{ stroke: var(--accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray .05s ease-in-out }
.loading-progress-text{ position:absolute; text-align:center; font-weight:700; inset: calc(20vh + 3.25rem) 0 auto .2rem }
.loading-progress-text:after{ content: var(--blazor-load-percentage-text, "Loading") }


/* === Dark-mode contrast fix for login card & fields ===================== */
/* Paste this at the END of theme.css */

html[data-bs-theme="dark"]{
  /* Card (panel) is lighter than page background for clear separation */
  --panel:#1a1f24;          /* was #161a1e */
  --panel-border:#2f353d;   /* was #2a2f36 */

  /* Inputs are a hair darker than panel so they sit “in” the card */
  --field-bg:#161b20;       /* was #161a1e */
  --field-chip-bg:#12161b;  /* keep */
  --field-border:#2a3037;   /* was #2a2f36 */
}

/* Subtle depth on the panel without adding a second border */
.bm-login-card{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--panel) 92%, white) 0%,
      var(--panel) 60%);
  border-color: var(--panel-border);
  box-shadow:
    0 18px 48px rgba(0,0,0,.22),  /* outer */
    inset 0 1px 0 rgba(255,255,255,.02); /* soft inner highlight */
}

/* Inputs: keep them readable and slightly inset vs. the panel */
.bm-login .input-group .form-control{
  background: var(--field-bg);
  border-color: var(--field-border);
}
.bm-login .input-group-text,
.bm-login .input-group .btn{
  background: var(--field-chip-bg);
  border-color: var(--field-border);
}


/* === Page glow (light/dark aware) ===================================== */
:root{
  /* dark defaults: saturated but subtle via transparency */
  --glow-top:    color-mix(in srgb, var(--blue)   26%, transparent);
  --glow-bottom: color-mix(in srgb, var(--brand)  28%, transparent);
  --glow-side:   color-mix(in srgb, var(--violet) 22%, transparent);
}
html[data-bs-theme="light"]{
  /* light mode: pastel/paper-friendly */
  --glow-top:    color-mix(in srgb, var(--blue)   20%, #fff 80%);
  --glow-bottom: color-mix(in srgb, var(--brand)  22%, #fff 78%);
  --glow-side:   color-mix(in srgb, var(--violet) 18%, #fff 82%);
}

/* attach to any section that needs the background glow */
.bg-glow{
  position: relative;
  isolation: isolate;        /* keep the glow behind content */
}
.bg-glow::before,
.bg-glow::after{
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  filter: blur(34px);
  border-radius: 50%;
}

/* top-right orb */
.bg-glow::before{
  width: 780px; height: 780px;
  right: -200px; top: -220px;
  background: radial-gradient(closest-side, var(--glow-top), transparent 70%);
}

/* bottom-left blend of brand + violet */
.bg-glow::after{
  width: 720px; height: 720px;
  left: -220px; bottom: -260px;
  background:
    radial-gradient(closest-side, var(--glow-bottom), transparent 72%),
    radial-gradient(closest-side, var(--glow-side),   transparent 75%);
}

@media (max-width: 576px){
  .bg-glow::before{ width: 420px; height: 420px; right:-120px; top:-140px; }
  .bg-glow::after { width: 380px; height: 380px; left:-110px; bottom:-140px; }
}


/* Prevent footer flash before page data arrives */
.bm-shell{
  min-height:100dvh;        /* fill viewport on modern browsers */
  display:flex;
  flex-direction:column;
}
.bm-main{
  flex:1 0 auto;            /* reserve space between header & footer */
}
/* --- Turnstile host: stable layout, no jumps --- */
.cf-host{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* left-align when Turnstile is fixed-width */
  min-height:78px;              /* reserve space so it doesn't "blink" */
}

.cf-host > iframe{
  display:block;                 /* remove inline-iframe baseline gap */
  border:0;
}

/* When Turnstile supports flexible size, stretch to full width */
.cf-host.cf-flex > iframe{
  width:100% !important;
  max-width:100% !important;
}

/* Slightly taller on very small screens to avoid clipping */
@media (max-width:420px){
  .cf-host{ min-height:86px; }
}

/* Keep toasts/modals above the CF iframe */
.bm-toast{ z-index:1060; }
.modal, .offcanvas, .dropdown-menu{ z-index:1060; }

/* Optional: reduce motion for accessibility (prevents subtle “flicker” feel) */
@media (prefers-reduced-motion: reduce){
  .bm-anim-fadeup{ animation:none !important; transition:none !important; }
}

/* iOS Safari: prevent zoom-on-focus jump in auth inputs (optional) */
.bm-login input, .bm-login button{ font-size:16px; }


/* === Pricing (scoped) – final =========================================== */

/* Header balance */
.pricing-head h1{ font-weight:700; letter-spacing:-.01em }
.pricing-head p{ font-weight:500 }

/* "Compare" title */
.compare-title{
  font-weight:700; letter-spacing:-.01em;
  margin:0 0 10px 0;
  font-size:clamp(22px,1.4vw + 18px,30px);
}

/* -----------------------------------------------------------------------
   CARDS (keep colorful border, control background, fix hover)
------------------------------------------------------------------------ */
.pricing-cards .plan-card{
  --plan-card-bg: #1B2126;                  /* default (dark) */
  /* Gradient border kept; background inside stays flat */
  background:
    linear-gradient(var(--plan-card-bg), var(--plan-card-bg)) padding-box,
    linear-gradient(135deg, rgba(16,185,129,.45), rgba(96,165,250,.45), rgba(167,139,250,.45)) border-box;
  border:1px solid transparent;
  border-radius:18px;
  box-shadow: var(--elev);
  transition:transform .18s ease, box-shadow .18s ease, background .2s ease;
}
html[data-bs-theme="light"] .pricing-cards .plan-card{
  --plan-card-bg:#ffffff;                   /* white card in light mode */
}
html[data-bs-theme="dark"] .pricing-cards .plan-card{
  --plan-card-bg:#1B2126;                   /* lifted charcoal in dark */
}
.pricing-cards .plan-card:hover{ transform: translateY(-3px) } /* keep border colors unchanged */

/* Bold plan names on cards */
.plan-title{ font-weight:800; letter-spacing:-.01em }

/* Optional stronger glow only for "highlight" (Pro) */
.plan--pro{ box-shadow: var(--elev-lg); }

/* Price styles */
.plan-price{ font-weight:800; letter-spacing:-.02em; line-height:1; font-size:clamp(34px,5vw,48px) }
.plan--pro .plan-price{ font-size:clamp(38px,5.5vw,52px) }
.plan-unit{ font-size:.95rem; font-weight:700; opacity:.75; margin-left:.125rem }
.plan-cta .btn{ height:44px; border-radius:12px; font-weight:700; padding-inline:18px }

/* "Most popular" ribbon (kept) */
.ribbon-most{
  position:absolute; top:10px; right:12px;
  padding:.28rem .6rem; border-radius:999px;
  font-size:.675rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-contrast);
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #4ade80));
  box-shadow:0 2px 10px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.12);
}

/* -----------------------------------------------------------------------
   MATRIX (keep colorful outer border, flat body bg, unified hover)
------------------------------------------------------------------------ */
.matrix-wrap{
  --matrix-bg: var(--surface);              /* base shell fill */
  background:
    linear-gradient(var(--matrix-bg), var(--matrix-bg)) padding-box,
    linear-gradient(135deg, rgba(16,185,129,.45), rgba(96,165,250,.45), rgba(167,139,250,.45)) border-box;
  border:1px solid transparent;
  border-radius:18px;
  overflow:hidden;
}

/* Header: white in light / surface in dark */
.matrix-table>thead.matrix-header>tr>th{
  background: var(--surface) !important;    /* light = white, dark = page surface */
  color: var(--text);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  font-weight:800;                           /* plan names bold */
}

/* Body row backgrounds (no stripes) */
.matrix-table{
  /* DARK DEFAULT overridable below */
  --row-bg:#1a1f24;                         /* light grey for dark mode rows */
  --hover-bg:#20262c;                       /* slightly lighter on hover */
}
/* Light mode: pure white rows + soft hover */
html[data-bs-theme="light"] .matrix-table{
  --row-bg:#ffffff;                         /* requested: white in light mode */
  --hover-bg:#F7F8F9;                       /* subtle hover on white */
}
/* Dark mode (explicit, mirrors default above for clarity) */
html[data-bs-theme="dark"] .matrix-table{
  --row-bg:#1a1f24;                         /* requested: light grey in dark mode */
  --hover-bg:#20262c;                       /* slightly lighter on hover */
}

/* Normalize every cell to the same background and border */
.matrix-table tbody tr > *{
  background: var(--row-bg) !important;
  border-color: var(--border);
  font-weight:400;
}

/* Remove Bootstrap stripes completely */
.matrix-table.table-striped>tbody>tr:nth-of-type(odd)>*{
  background: var(--row-bg) !important;
}

/* Unified hover shade (both themes) */
.matrix-table.table-hover>tbody>tr:hover>*{
  background: var(--hover-bg) !important;
}

/* Sticky first column: always match the row color (normal + hover) */
.matrix-table .matrix-sticky-left{
  position:sticky; left:0; z-index:2;
  background: var(--row-bg) !important;
  background-clip: padding-box;
  box-shadow:none;
}
.matrix-table.table-hover>tbody>tr:hover>.matrix-sticky-left{
  background: var(--hover-bg) !important;
}
/* Header cell of sticky column follows header color */
.matrix-table thead .matrix-sticky-left{
  background: var(--surface) !important;
}

/* Ticks/dashes: neutral text color (no brand) */
.matrix-table td.tick{
  text-align:center; font-weight:400; font-size:1.05rem; letter-spacing:.01em;
  color: var(--text);
}

/* CTA row */
.matrix-cta-row .btn{ border-radius:10px; padding:6px 12px; font-weight:700 }

/* -----------------------------------------------------------------------
   FAQ OVERRIDES (remove active/selection tint)
------------------------------------------------------------------------ */
#faqAccordion .accordion-button{
  background: transparent !important;
}
#faqAccordion .accordion-button:not(.collapsed){
  background: transparent !important;
  box-shadow: none !important;
}

/* -----------------------------------------------------------------------
   PAGE GLOW (unchanged)
------------------------------------------------------------------------ */
.bg-glow{ position:relative; isolation:isolate }
.bg-glow::before, .bg-glow::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  filter: blur(36px); border-radius:50%;
}
.bg-glow::before{
  width:740px; height:740px; right:-220px; top:-240px;
  background: radial-gradient(closest-side, var(--glow-top), transparent 70%);
}
.bg-glow::after{
  width:700px; height:700px; left:-220px; bottom:-260px;
  background:
    radial-gradient(closest-side, var(--glow-bottom), transparent 72%),
    radial-gradient(closest-side, var(--glow-side),   transparent 75%);
}

/* Mobile */
@media (max-width:576px){
  .ribbon-most{ right:10px; top:8px; font-size:.62rem; padding:.24rem .52rem }
  .matrix-cta-row .btn{ width:100% }
  .bg-glow::before{ width:420px; height:420px; right:-120px; top:-140px }
  .bg-glow::after { width:380px; height:380px; left:-110px; bottom:-140px }
}


/* === Legal (scoped) – final =========================================== */

  /* Layout */
  .legal-wrap{ display:flex; gap:24px }
  .legal-side{ flex:0 0 260px }
  .legal-body{ flex:1 1 auto; max-width: 900px }

  /* Card shell for policy body (matches site look) */
  .legal-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--elev);
    padding: clamp(16px, 1.4vw + 12px, 26px);
  }

  /* Reading comfort */
  .legal-body h1{ font-weight:800; letter-spacing:-.01em; margin-bottom:.5rem }
  .legal-body p.lead{ color: var(--muted); font-weight:500; margin-bottom:1rem }
  .legal-body h2{ font-size: clamp(18px, 1.1vw + 14px, 22px); font-weight:700; margin: 1.1rem 0 .4rem }
  .legal-body p{ line-height:1.65; color: var(--text); margin: .35rem 0 }

  /* Side list styles (active = brand) */
  .legal-nav .list-group-item{
    background: transparent;
    color: var(--text);
    border-color: var(--border);
  }
  .legal-nav .list-group-item.active{
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
  }

  /* Sticky aside on large screens */
  @media (min-width: 992px){
    .legal-sticky{ position: sticky; top: 88px }
  }

  /* Mobile: stack + show quick selector */
  @media (max-width: 991.98px){
    .legal-wrap{ flex-direction: column }
    .legal-side{ flex: 0 0 auto }
    .legal-body{ max-width: 100% }
  }