/* ==========================================================================
   TestLock — dark theme
   Active only when <html data-theme="dark"> (chosen by the user, per device).
   Test pages carry data-theme-lock="light" and never switch.
   ========================================================================== */

/* ---------------- Theme toggle button (both themes) ---------------- */
.tl-theme-toggle {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--tl-line, #ECE7F0);
  border-radius: 999px;
  background: var(--tl-surface, #fff);
  color: var(--tl-ink-2, #4A4357);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.tl-theme-toggle:hover { color: #6E2689; border-color: #E8BDF5; background: #FAF5FC; }
.tl-theme-toggle:active { transform: scale(.94); }
.tl-theme-toggle svg { width: 18px; height: 18px; }
.tl-theme-toggle .tl-ico-sun { display: none; }
html[data-theme="dark"] .tl-theme-toggle .tl-ico-sun { display: block; }
html[data-theme="dark"] .tl-theme-toggle .tl-ico-moon { display: none; }
.lp-nav__cta .tl-theme-toggle { width: 42px; height: 42px; }

/* Smooth colour change only while switching */
html.tl-theme-switching,
html.tl-theme-switching *,
html.tl-theme-switching *::before,
html.tl-theme-switching *::after {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

/* ==========================================================================
   DARK TOKENS
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  --dk-bg: #120B19;
  --dk-bg-2: #170F20;
  --dk-surface: #1E1529;
  --dk-surface-2: #261B34;
  --dk-surface-3: #2F2240;
  --dk-line: #3A2B4D;
  --dk-line-2: #4A3862;
  --dk-ink: #F3EDF8;
  --dk-ink-2: #D3C7DF;
  --dk-muted: #A497B4;
  --dk-purple: #C68BDA;
  --dk-purple-2: #D9A9E8;
  --dk-purple-bg: #3A2350;

  /* testlock-ui.css tokens */
  --tl-purple-50: #2A1C38;
  --tl-purple-100: #36234A;
  --tl-purple-200: #5A3B73;
  --tl-purple-700: #D9A9E8;
  --tl-purple-900: #F0DDF7;
  --tl-ink: var(--dk-ink);
  --tl-ink-2: var(--dk-ink-2);
  --tl-muted: var(--dk-muted);
  --tl-line: var(--dk-line);
  --tl-surface: var(--dk-surface);
  --tl-bg: var(--dk-bg);
  --tl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --tl-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -14px rgba(0, 0, 0, .7);
  --tl-shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 26px 54px -22px rgba(0, 0, 0, .8);

  /* landing.css tokens */
  --lp-purple-50: #2A1C38;
  --lp-purple-100: #36234A;
  --lp-purple-200: #5A3B73;
  --lp-purple-300: #8E5FA6;
  --lp-purple-700: #D9A9E8;
  --lp-lilac-soft: #2A1C38;
  --lp-ink: var(--dk-ink);
  --lp-ink-2: var(--dk-ink-2);
  --lp-muted: var(--dk-muted);
  --lp-line: var(--dk-line);
  --lp-bg: var(--dk-bg);
  --lp-bg-soft: var(--dk-bg-2);
  --lp-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -14px rgba(0, 0, 0, .75);
  --lp-shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 30px 60px -24px rgba(0, 0, 0, .85);

  /* Bootstrap */
  --bs-body-bg: var(--dk-bg);
  --bs-body-color: var(--dk-ink-2);
  --bs-emphasis-color: var(--dk-ink);
  --bs-secondary-color: var(--dk-muted);
  --bs-tertiary-bg: var(--dk-surface-2);
  --bs-border-color: var(--dk-line);
  --bs-heading-color: var(--dk-ink);
  --bs-link-color: var(--dk-purple);
  --bs-link-hover-color: var(--dk-purple-2);
  --bs-card-bg: var(--dk-surface);
  --bs-table-color: var(--dk-ink-2);
  --bs-table-bg: transparent;
}

/* ==========================================================================
   BASE
   ========================================================================== */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--dk-bg) !important;
  color: var(--dk-ink-2);
}
html[data-theme="dark"] body { background-image: none; }

html[data-theme="dark"] a:not(.btn):not([class*="btn"]):not(.lp-btn) { color: var(--dk-purple); }
html[data-theme="dark"] a:not(.btn):not([class*="btn"]):not(.lp-btn):hover { color: var(--dk-purple-2); }
html[data-theme="dark"] hr { border-color: var(--dk-line); opacity: 1; }
html[data-theme="dark"] ::selection { background: #5A3B73; color: #fff; }

/* Images keep their colours; transparent mascot art stays as is */
html[data-theme="dark"] img { filter: none; }

/* While the adaptive script reads colours, nothing may be mid-transition */
html.tl-dk-measuring.tl-dk-measuring *,
html.tl-dk-measuring.tl-dk-measuring *::before,
html.tl-dk-measuring.tl-dk-measuring *::after { transition: none !important; }

/* Reveal guard: hide the page for a moment while colours are adapted.
   The CSS animation shows it anyway after 1.2 s if scripts are blocked. */
@keyframes dk-reveal { to { opacity: 1; } }
html.tl-dk-pending body { opacity: 0; animation: dk-reveal 0s 1.2s forwards; }

/* ==========================================================================
   FORMS
   ========================================================================== */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] select, html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
  background-color: var(--dk-surface-2) !important;
  border-color: var(--dk-line-2) !important;
  color: var(--dk-ink) !important;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #8C7F9C !important; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus {
  border-color: var(--dk-purple) !important;
  box-shadow: 0 0 0 4px rgba(198, 139, 218, .2) !important;
}
html[data-theme="dark"] input[readonly], html[data-theme="dark"] input:disabled,
html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] .form-control:disabled { background-color: var(--dk-bg-2) !important; color: var(--dk-muted) !important; }
html[data-theme="dark"] .form-check-input { background-color: var(--dk-surface-2); border-color: var(--dk-line-2); }
html[data-theme="dark"] .input-group-text { background: var(--dk-surface-3); border-color: var(--dk-line-2); color: var(--dk-ink-2); }

/* ==========================================================================
   TABLES, BADGES, ALERTS, BUTTONS
   ========================================================================== */
html[data-theme="dark"] table, html[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, .03);
  --bs-table-hover-bg: rgba(198, 139, 218, .08);
  --bs-table-border-color: var(--dk-line);
  color: var(--dk-ink-2);
}
html[data-theme="dark"] table th, html[data-theme="dark"] table td,
html[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent !important;
  border-color: var(--dk-line) !important;
  color: var(--dk-ink-2);
}
html[data-theme="dark"] table thead th, html[data-theme="dark"] .table > thead th {
  background-color: var(--dk-surface-2) !important;
  color: var(--dk-muted) !important;
}
html[data-theme="dark"] .alert { border-color: var(--dk-line-2) !important; }
html[data-theme="dark"] .alert-success { background: #12301F !important; color: #9BE7B6 !important; }
html[data-theme="dark"] .alert-danger { background: #3A161B !important; color: #FFB3BC !important; }
html[data-theme="dark"] .alert-warning { background: #362A10 !important; color: #FCD98C !important; }
html[data-theme="dark"] .alert-info, html[data-theme="dark"] .alert-primary { background: #2A1C38 !important; color: var(--dk-purple-2) !important; }
html[data-theme="dark"] .bg-warning.text-dark, html[data-theme="dark"] .badge.bg-warning { color: #3B2A00 !important; }
html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-secondary:not(.btn-primary) {
  background: var(--dk-surface-2); border-color: var(--dk-line-2); color: var(--dk-ink);
}
html[data-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--dk-purple); --bs-btn-border-color: #7B4F92; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html[data-theme="dark"] .pagination { --bs-pagination-bg: var(--dk-surface); --bs-pagination-border-color: var(--dk-line); --bs-pagination-color: var(--dk-purple); }
html[data-theme="dark"] .nav-tabs { border-color: var(--dk-line); }
html[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--dk-surface); border-color: var(--dk-line) var(--dk-line) var(--dk-surface); color: var(--dk-ink); }
html[data-theme="dark"] .progress { background: #2F2240; }

/* ==========================================================================
   APP SHELL (header, sidebar, title band, bottom nav, drawer, footer)
   ========================================================================== */
html[data-theme="dark"] .top-header { background: rgba(23, 15, 32, .88) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .top-header .logo-text { color: var(--dk-ink); }
html[data-theme="dark"] .top-header .user-info strong { color: var(--dk-ink); }
html[data-theme="dark"] .top-header .btn-logout { background: var(--dk-surface-2); border-color: var(--dk-line); color: var(--dk-ink-2); }
html[data-theme="dark"] .tl-theme-toggle { background: var(--dk-surface-2); border-color: var(--dk-line); color: #FBD86B; }
html[data-theme="dark"] .tl-theme-toggle:hover { background: var(--dk-surface-3); border-color: var(--dk-line-2); color: #FFE7A0; }
html[data-theme="dark"] .tl-menu-btn { background: var(--dk-surface-2); border-color: var(--dk-line); color: var(--dk-ink); }

html[data-theme="dark"] .breadcrumb-bar,
html[data-theme="dark"] .main-wrapper > .hero-banner {
  background-color: var(--dk-bg-2) !important;
  background-image:
    radial-gradient(900px 300px at 85% -40%, rgba(163, 88, 181, .35), transparent 70%),
    radial-gradient(700px 260px at 0% 120%, rgba(110, 38, 137, .3), transparent 70%) !important;
  border-color: var(--dk-line) !important;
}
html[data-theme="dark"] .breadcrumb-bar .breadcrumb-title,
html[data-theme="dark"] .main-wrapper > .hero-banner .breadcrumb-title { color: var(--dk-ink) !important; }

html[data-theme="dark"] .main-wrapper .sidebar-card,
html[data-theme="dark"] .tl-drawer__panel { background: var(--dk-surface) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .main-wrapper .sidebar-menu li a,
html[data-theme="dark"] .tl-drawer .sidebar-menu li a { color: var(--dk-ink-2) !important; }
html[data-theme="dark"] .main-wrapper .sidebar-menu li a:hover,
html[data-theme="dark"] .tl-drawer .sidebar-menu li a:hover { background: #2A1C38 !important; color: var(--dk-purple-2) !important; }
html[data-theme="dark"] .main-wrapper .sidebar-menu li.active a,
html[data-theme="dark"] .tl-drawer .sidebar-menu li.active a { background: var(--dk-purple-bg) !important; color: #F0DDF7 !important; }
html[data-theme="dark"] .main-wrapper .sidebar-menu li a i { color: var(--dk-muted); }
html[data-theme="dark"] .main-wrapper .sidebar-menu li.active a i { color: var(--dk-purple-2); }
html[data-theme="dark"] .tl-drawer__close { background: var(--dk-surface-2); color: var(--dk-ink-2); }
html[data-theme="dark"] .tl-drawer__brand { color: var(--dk-ink); }
html[data-theme="dark"] .tl-bottom-nav { background: rgba(23, 15, 32, .94) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .tl-bottom-nav a, html[data-theme="dark"] .tl-bottom-nav button { color: var(--dk-muted); }
html[data-theme="dark"] .tl-bottom-nav .is-active, html[data-theme="dark"] .tl-bottom-nav .is-active i { color: var(--dk-purple-2); }
html[data-theme="dark"] .tl-footer { background: var(--dk-bg-2) !important; border-color: var(--dk-line) !important; }

/* Brand gradient hero cards stay purple; just deepen them */
html[data-theme="dark"] .main-wrapper .hero-card,
html[data-theme="dark"] .hero-card {
  background: radial-gradient(600px 200px at 100% 0%, rgba(255, 255, 255, .12), transparent 60%),
              linear-gradient(135deg, #6E2689 0%, #8C3FA0 55%, #A358B5 100%) !important;
}
html[data-theme="dark"] .hero-card, html[data-theme="dark"] .hero-card * { color: #fff; }
html[data-theme="dark"] .hero-card .btn-start, html[data-theme="dark"] .hero-card .btn { color: #6E2689 !important; }

/* Install banner & chat hint */
html[data-theme="dark"] .tl-install, html[data-theme="dark"] .lk-chat-hint { background: var(--dk-surface-2); border-color: var(--dk-line); color: var(--dk-ink-2); }
html[data-theme="dark"] .tl-install__body strong { color: var(--dk-ink); }

/* ==========================================================================
   LOCKYE (buddy bubbles, waiting screen, celebration)
   ========================================================================== */
html[data-theme="dark"] .lk-buddy__say, html[data-theme="dark"] .lk-say,
html[data-theme="dark"] .lk-wait__say {
  background: var(--dk-surface-2) !important; border-color: var(--dk-line-2) !important; color: var(--dk-ink) !important;
}
html[data-theme="dark"] .lk-buddy__say::after, html[data-theme="dark"] .lk-wait__say::after {
  background: var(--dk-surface-2); border-color: var(--dk-line-2);
}
html[data-theme="dark"] .lk-buddy__eye { background: radial-gradient(circle at 50% 40%, #fff 60%, #F3E8FA 100%); }
html[data-theme="dark"] .lk-wait {
  background: radial-gradient(700px 500px at 50% 20%, rgba(110, 38, 137, .55), transparent 65%), var(--dk-bg) !important;
  color: var(--dk-ink) !important;
}
html[data-theme="dark"] .lk-wait__title { color: var(--dk-ink) !important; }
html[data-theme="dark"] .lk-wait__steps { background: var(--dk-surface) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .lk-wait__steps li::before { background: var(--dk-surface-2); border-color: var(--dk-line-2); }
html[data-theme="dark"] .lk-wait__steps li.is-active, html[data-theme="dark"] .lk-wait__steps li.is-done { color: var(--dk-ink); }
html[data-theme="dark"] .lk-wait__bar { background: #2F2240 !important; }
html[data-theme="dark"] .lk-wait__tip { background: #362A10 !important; border-color: #5C4818 !important; color: #FCD98C !important; }
html[data-theme="dark"] .lk-celebrate { background: rgba(18, 11, 25, .82); }
html[data-theme="dark"] .lk-celebrate__card { background: var(--dk-surface) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .lk-tip { background: #2A1C38 !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .lk-expired { background: #2A1C38 !important; border-color: var(--dk-line-2) !important; color: var(--dk-ink-2) !important; }

/* ==========================================================================
   CHATBOT
   ========================================================================== */
html[data-theme="dark"] #lockye-chatbox {
  --lc-bg: var(--dk-bg-2);
  --lc-line: var(--dk-line);
  --lc-ink: var(--dk-ink);
  --lc-ink-2: var(--dk-ink-2);
  --lc-muted: var(--dk-muted);
  --lc-purple-50: #2A1C38;
  --lc-purple-dark: var(--dk-purple-2);
  background: var(--dk-bg-2);
  border-color: var(--dk-line);
}
html[data-theme="dark"] .lockye-welcome, html[data-theme="dark"] .lockye-message.bot .lockye-message-content,
html[data-theme="dark"] .lockye-chips, html[data-theme="dark"] .lockye-input-area, html[data-theme="dark"] .lockye-footnote {
  background: var(--dk-surface) !important;
}
html[data-theme="dark"] .lockye-topic:hover { background: var(--dk-surface-2) !important; }
html[data-theme="dark"] .lockye-message.bot::before { background-color: var(--dk-surface-2); border-color: var(--dk-line); }
html[data-theme="dark"] #lockye-input { background: var(--dk-surface-2) !important; border-color: var(--dk-line-2) !important; color: var(--dk-ink) !important; }
html[data-theme="dark"] .lockye-retry { background: var(--dk-surface-2); border-color: var(--dk-line-2); color: var(--dk-purple-2); }
html[data-theme="dark"] #lockye-bubble { border-color: var(--dk-surface-2); }

/* ==========================================================================
   LANDING PAGE
   ========================================================================== */
html[data-theme="dark"] body.lp { background: var(--dk-bg) !important; }
html[data-theme="dark"] .lp-nav { background: rgba(18, 11, 25, .82) !important; }
html[data-theme="dark"] .lp-nav.is-scrolled { border-color: var(--dk-line) !important; }
html[data-theme="dark"] .lp-nav__toggle { background: var(--dk-surface-2); border-color: var(--dk-line); color: var(--dk-ink); }
html[data-theme="dark"] .lp-btn--ghost { background: var(--dk-surface-2) !important; border-color: var(--dk-line-2) !important; color: var(--dk-ink) !important; }
html[data-theme="dark"] .lp-welcome {
  background:
    radial-gradient(800px 520px at 22% 45%, rgba(110, 38, 137, .55), transparent 62%),
    radial-gradient(700px 500px at 90% 10%, rgba(163, 88, 181, .3), transparent 60%),
    var(--dk-bg) !important;
}
html[data-theme="dark"] .lp-welcome__chips span { background: rgba(38, 27, 52, .8) !important; border-color: var(--dk-line) !important; color: var(--dk-ink-2) !important; }
html[data-theme="dark"] .lp-hero {
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(110, 38, 137, .45), transparent 62%),
    radial-gradient(700px 420px at -10% 35%, rgba(163, 88, 181, .22), transparent 60%),
    var(--dk-bg) !important;
}
html[data-theme="dark"] .lp-section--soft, html[data-theme="dark"] .lp-meet { background: var(--dk-bg-2) !important; }
html[data-theme="dark"] .lp-compare__item--risk { background: #2B1519 !important; border-color: #5B2A33 !important; }
html[data-theme="dark"] .lp-compare__item--safe { background: linear-gradient(135deg, var(--dk-surface), #2A1C38) !important; }
html[data-theme="dark"] .lp-disclaimer { background: #362A10 !important; border-color: #5C4818 !important; color: #FCD98C !important; }
html[data-theme="dark"] .lp-disclaimer *, html[data-theme="dark"] .lp-disclaimer b { color: #FCD98C !important; }
html[data-theme="dark"] .lp-plan--featured { background: radial-gradient(700px 260px at 100% 0%, rgba(163, 88, 181, .3), transparent 65%), var(--dk-surface) !important; border-color: var(--dk-purple) !important; }
html[data-theme="dark"] .lp-price { background: var(--dk-surface-2) !important; }
html[data-theme="dark"] .lp-chip { background: #36234A !important; color: var(--dk-purple-2) !important; }
html[data-theme="dark"] .lp-chip--gold { background: #12301F !important; color: #9BE7B6 !important; }
html[data-theme="dark"] .lp-table-wrap { background: var(--dk-surface) !important; }
html[data-theme="dark"] .lp-table thead th { background: var(--dk-surface-2) !important; color: var(--dk-ink) !important; }
html[data-theme="dark"] .lp-faq details, html[data-theme="dark"] .lp-faq-tabs button:not(.is-active) { background: var(--dk-surface) !important; color: var(--dk-ink-2) !important; }
html[data-theme="dark"] .lp-faq summary { color: var(--dk-ink) !important; }
html[data-theme="dark"] .lp-sticky-cta { background: rgba(23, 15, 32, .95) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .lp-mock__card, html[data-theme="dark"] .lp-float, html[data-theme="dark"] .lp-stats__grid,
html[data-theme="dark"] .lp-feature:not(.lp-feature--wide), html[data-theme="dark"] .lp-reason, html[data-theme="dark"] .lp-step,
html[data-theme="dark"] .lp-format__card, html[data-theme="dark"] .lp-module, html[data-theme="dark"] .lp-role,
html[data-theme="dark"] .lp-plan:not(.lp-plan--featured) { background: var(--dk-surface) !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .lp-mock__insight { background: #2A1C38 !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .lp-ring span { background: var(--dk-surface) !important; color: var(--dk-ink) !important; }
html[data-theme="dark"] .lp-feature__icon, html[data-theme="dark"] .lp-reason__icon, html[data-theme="dark"] .lp-module__icon { background: #2F2240 !important; border-color: var(--dk-line) !important; }
html[data-theme="dark"] .lp-eyebrow { background: #36234A !important; color: var(--dk-purple-2) !important; }
html[data-theme="dark"] .lp-cta .lp-eyebrow, html[data-theme="dark"] .lp-feature--wide .lp-eyebrow { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
html[data-theme="dark"] .lp-cta, html[data-theme="dark"] .lp-cta * , html[data-theme="dark"] .lp-feature--wide, html[data-theme="dark"] .lp-feature--wide * { color: #fff; }
html[data-theme="dark"] .lp-cta .lp-btn--white { color: #6E2689 !important; }
html[data-theme="dark"] .lp-cta__btns .lp-btn--ghost { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, .4) !important; }
html[data-theme="dark"] .lp-footer { background: #0D0812 !important; }
html[data-theme="dark"] .lp-footer *, html[data-theme="dark"] .lp-footer a { color: rgba(255, 255, 255, .72); }
html[data-theme="dark"] .lp-footer h4, html[data-theme="dark"] .lp-footer strong { color: #fff; }

/* Auth pages (login / register / forgot / reset) */
html[data-theme="dark"] .login-page, html[data-theme="dark"] .left-side, html[data-theme="dark"] .right-side,
html[data-theme="dark"] .auth-container, html[data-theme="dark"] .forgot-page {
  background-color: var(--dk-bg) !important;
  background-image: radial-gradient(800px 500px at 10% 0%, rgba(110, 38, 137, .45), transparent 60%) !important;
}

/* Brand gradient buttons keep white text */
html[data-theme="dark"] [class*="btn-checkout"], html[data-theme="dark"] .rp-btn, html[data-theme="dark"] .pay-btn--primary,
html[data-theme="dark"] .lp-btn--primary, html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-have,
html[data-theme="dark"] .btn-have-token, html[data-theme="dark"] .lk-celebrate__btn, html[data-theme="dark"] .submit-btn { color: #fff !important; }