/*!
 #######   ######      #        #       #####    #####
    #     #           # #      ##      #        #     #
    #     #  ####    #####      #      ######    #####
    #     #     #   #     #     #      #     #  #     #
    #      ######   #     #   #####     #####    #####

 TGA168 | Scan2Slip | https://scan2slip.online
 Source identification watermark.
*/
/* Theme controls are shared by both palettes. Existing light surfaces stay intact. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 7px;
  min-width: 40px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #e5dcf0;
  border-radius: 12px;
  background: #fff;
  color: #755295;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}
.theme-toggle:hover { background: #f3ecfc; border-color: #cfb9ec; }
.theme-toggle .icon { width: 19px; height: 19px; }
.theme-toggle > span { white-space: nowrap; }
.theme-toggle:focus-visible { outline: 3px solid #a77adb; outline-offset: 3px; }
.login-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 12px; }
.login-topbar > .theme-toggle { margin-left: auto; }
.header-actions > .theme-toggle { margin: 0; }

/* Use explicit semantic colors; photographs and live camera frames are unaltered. */
html[data-theme="dark"] {
  --purple: #bb98ff;
  --purple-dark: #d2b8ff;
  --purple-soft: #342547;
  --ink: #f3eef8;
  --muted: #b9acc8;
  --line: #3c3248;
  --background: #14121c;
  --green: #78dab2;
  --red: #ff9bb0;
  --amber: #f3cb7f;
  --shadow: 0 8px 32px #00000018;
  --theme-surface: #201a27;
  --theme-raised: #2a2233;
  --theme-control: #251e2d;
  --theme-text: #e0d5eb;
  --theme-subtle: #bcadca;
  --theme-accent-solid: #8050d4;
  --theme-accent-hover: #8957da;
  --theme-success-bg: #19392e;
  --theme-success-border: #315b49;
  --theme-danger-bg: #41232d;
  --theme-danger-border: #70404e;
  --theme-warning-bg: #3d301b;
  --theme-warning-border: #6a542f;
  --theme-neutral-bg: #302737;
  background: var(--background);
  scrollbar-color: #655370 var(--background);
}
html[data-theme="dark"] body { background: var(--background); color: var(--ink); }
html[data-theme="dark"] ::selection { background: #7043a6; color: #fff; }
html[data-theme="dark"] :is(button, a, input, textarea, select, summary):focus-visible {
  outline: 3px solid #c4a0ff;
  outline-offset: 3px;
}
html[data-theme="dark"] :is(input, textarea, select) { caret-color: #d2b8ff; accent-color: #bb98ff; }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #a99ab8; opacity: 1; }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .history-summary > div,
html[data-theme="dark"] .account-balances > div { background: var(--theme-surface); }
html[data-theme="dark"] :is(.theme-toggle, .button-secondary, .circle-button, .provider-tag, .receiver-brand-count) {
  background: var(--theme-raised);
  border-color: var(--line);
  color: var(--theme-text);
}
html[data-theme="dark"] :is(.theme-toggle, .button-secondary):hover:not(:disabled),
html[data-theme="dark"] .icon-button:hover {
  background: #392b47;
  border-color: #765496;
  color: #e2cdff;
}
html[data-theme="dark"] .button-primary,
html[data-theme="dark"] .scanner-launch-cta {
  background: var(--theme-accent-solid);
  color: #fff;
  box-shadow: 0 5px 18px #00000024;
}
html[data-theme="dark"] .button-primary:hover:not(:disabled) { background: var(--theme-accent-hover); }
html[data-theme="dark"] .button-primary:disabled,
html[data-theme="dark"] .button-secondary:disabled {
  background: #3b3048;
  border-color: #4a3d57;
  color: #b2a4bf;
  box-shadow: none;
}
html[data-theme="dark"] .receiver-form-actions > .button:disabled { opacity: 1; }
html[data-theme="dark"] .spinner { border-color: #65517f; border-top-color: #cfacff; }
html[data-theme="dark"] .button .spinner { border-color: #ffffff55; border-top-color: #fff; }
html[data-theme="dark"] .form-error,
html[data-theme="dark"] .receivers-error-box {
  background: var(--theme-danger-bg);
  border-color: var(--theme-danger-border);
  color: #ffb3c3;
}
html[data-theme="dark"] .inline-error { color: #f3cb7f; }
html[data-theme="dark"] .receivers-error-box > .button { background: #51313d; border-color: #805363; color: #ffd0dc; }
html[data-theme="dark"] .button-danger { background: #a64767; border-color: #b75678; color: #fff; }
html[data-theme="dark"] .button-danger:hover:not(:disabled) { background: #ba5275; }
html[data-theme="dark"] .button-danger:disabled { background: #54323f; border-color: #684253; color: #c8aaba; }

/* App shell and login. */
html[data-theme="dark"] .app-header { background: #1d1723f2; border-color: var(--line); }
html[data-theme="dark"] .avatar { background: var(--purple-soft); border-color: #564169; color: #d2b8ff; }
html[data-theme="dark"] .connection { color: #90d4b9; }
html[data-theme="dark"] .connection > span { background: #73d7af; box-shadow: 0 0 0 4px #73d7af14; }
html[data-theme="dark"] .connection.offline { color: #edc37c; }
html[data-theme="dark"] .connection.offline > span { background: #edc37c; box-shadow: 0 0 0 4px #edc37c14; }
html[data-theme="dark"] .bottom-nav { background: #1e1825f2; border-color: var(--line); }
html[data-theme="dark"] .nav-item { color: #b9adc8; }
html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .nav-item:hover { color: #d3b5ff; }
html[data-theme="dark"] .nav-item.active:before { background: #3b2a51; }
html[data-theme="dark"] .toast { background: #ded0ed; color: #241a2e; box-shadow: 0 6px 26px #0006; }
html[data-theme="dark"] .login-screen { background: var(--background); }
html[data-theme="dark"] .login-visual {
  background: radial-gradient(ellipse at 80% 10%, #53316466, transparent 60%), linear-gradient(145deg, #2b1d39, #19131f);
}
html[data-theme="dark"] .login-orbit { border-color: #9d72c035; }
html[data-theme="dark"] .floating-receipt {
  background: #30243edd;
  border-color: #57406b;
  color: #d1aff0;
  box-shadow: 15px 30px 70px #0004;
}
html[data-theme="dark"] .floating-receipt > strong { color: #ead6fa; }
html[data-theme="dark"] .receipt-dash { border-color: #70577f; }
html[data-theme="dark"] .receipt-check .icon { background: #4a345b; color: #d6b0f4; }
html[data-theme="dark"] .password-wrap,
html[data-theme="dark"] .qr-details textarea,
html[data-theme="dark"] .search-wrap,
html[data-theme="dark"] .range-endpoint input,
html[data-theme="dark"] .receiver-field input,
html[data-theme="dark"] .receiver-field select {
  background: var(--theme-control);
  border-color: #55435f;
  color: var(--ink);
}
html[data-theme="dark"] .password-wrap input,
html[data-theme="dark"] .search-wrap input { color: var(--ink); }
html[data-theme="dark"] .password-wrap:focus-within,
html[data-theme="dark"] .search-wrap:focus-within,
html[data-theme="dark"] .qr-details textarea:focus,
html[data-theme="dark"] .range-endpoint input:focus,
html[data-theme="dark"] .receiver-field input:focus,
html[data-theme="dark"] .receiver-field select:focus {
  border-color: #b286df;
  box-shadow: 0 0 0 3px #b286df1c;
}
html[data-theme="dark"] .password-wrap input::placeholder,
html[data-theme="dark"] .search-wrap input::placeholder,
html[data-theme="dark"] .receiver-field input::placeholder { color: #b0a1bc; }
html[data-theme="dark"] .password-wrap input:-webkit-autofill,
html[data-theme="dark"] .receiver-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--theme-control) inset;
  caret-color: var(--ink);
}

/* Camera launch, gallery, empty and loading states. */
html[data-theme="dark"] .step-chip,
html[data-theme="dark"] .tip-icon,
html[data-theme="dark"] .today-icon,
html[data-theme="dark"] .summary-bank-icon { background: #35283f; color: #ccafe8; }
html[data-theme="dark"] .live-tag i { background: #c499f5; box-shadow: 0 0 0 3px #c499f516; }
html[data-theme="dark"] .scanner-launch {
  border-color: #594073;
  background: radial-gradient(ellipse at 50% 15%, #53306866, transparent 58%), linear-gradient(135deg, #30203f, #251b30);
}
html[data-theme="dark"] .scanner-launch:hover:not(:disabled) { border-color: #9871bb; background: linear-gradient(135deg, #3c2850, #30203e); }
html[data-theme="dark"] .scanner-launch-art { background: #372447; border-color: #684582; color: #d5acff; box-shadow: 0 7px 20px #0002; }
html[data-theme="dark"] .scanner-launch > strong { color: #ead6ff; }
html[data-theme="dark"] .scanner-launch > span:not(.scanner-launch-art):not(.scanner-launch-cta) { color: #c9b6d9; }
html[data-theme="dark"] .gallery-divider:before,
html[data-theme="dark"] .gallery-divider:after { background: var(--line); }
html[data-theme="dark"] .upload-zone { background: linear-gradient(130deg, #2d2238, #271f30); border-color: #634a7a; color: #c6b5d4; }
html[data-theme="dark"] .upload-zone:hover,
html[data-theme="dark"] .upload-zone.dragging { background: #382947; border-color: #b78cde; }
html[data-theme="dark"] .upload-art { background: #382745; border-color: #614776; box-shadow: 5px 6px 0 #473154; }
html[data-theme="dark"] .upload-art > .icon { color: #d0a6f3; }
html[data-theme="dark"] .upload-plus { border-color: #271f30; background: var(--theme-accent-solid); }
html[data-theme="dark"] .upload-zone strong { color: #dac4ec; }
html[data-theme="dark"] .upload-zone.gallery-fallback { background: #261e2e; border-color: #48374f; }
html[data-theme="dark"] .upload-zone.gallery-fallback:hover { background: #312439; border-color: #765988; }
html[data-theme="dark"] .upload-zone.gallery-fallback strong { color: #d4c1e3; }
html[data-theme="dark"] .image-preview { background: #161219; border-color: var(--line); }
html[data-theme="dark"] .preview-footer { background: #2b2036; border-color: var(--line); }
html[data-theme="dark"] .empty-result-art { background: radial-gradient(circle, #30223f 55%, #261e30 56%, #261e30 70%, transparent 71%); }
html[data-theme="dark"] .scan-frame { background: #2c1d3a; border-color: #76558f; color: #c5a0e2; box-shadow: 3px 5px 0 #443052; }
html[data-theme="dark"] .art-check { background: #583b6b; color: #dec3f3; border-color: var(--theme-surface); }
html[data-theme="dark"] .today-panel { background: #2a2034; border-color: var(--line); }
html[data-theme="dark"] .camera-dialog,
html[data-theme="dark"] .history-dialog,
html[data-theme="dark"] .receiver-dialog { background: var(--theme-surface); border-color: #584262; color: var(--ink); box-shadow: 0 24px 100px #0007; }
html[data-theme="dark"] :is(.camera-dialog, .history-dialog, .receiver-dialog)::backdrop { background: #07050bc7; }
html[data-theme="dark"] .camera-top h2,
html[data-theme="dark"] .receiver-dialog .dialog-top h2 { color: #e3cef4; }
html[data-theme="dark"] .camera-top > .icon-button,
html[data-theme="dark"] .receiver-dialog .dialog-top .icon-button { background: #392945; color: #d2b6e8; }
html[data-theme="dark"] .camera-top > .icon-button:hover,
html[data-theme="dark"] .receiver-dialog .dialog-top .icon-button:hover { background: #4a335b; color: #fff; }
html[data-theme="dark"] .camera-bottom > p:first-child { color: #cfbddc; }
html[data-theme="dark"] .camera-read-status { color: #bfacd0; }

/* Result details: green means the original status, never an invented match. */
html[data-theme="dark"] .status-symbol,
html[data-theme="dark"] .result-badge-success { background: var(--theme-success-bg); color: var(--green); }
html[data-theme="dark"] .result-badge-purple { background: var(--purple-soft); color: #dcc4ff; }
html[data-theme="dark"] .result-card.status-fake .status-symbol,
html[data-theme="dark"] .status-pill-fake,
html[data-theme="dark"] .history-item.status-fake .status-symbol { background: var(--theme-danger-bg); color: var(--red); }
html[data-theme="dark"] .result-card.status-duplicate .status-symbol,
html[data-theme="dark"] .status-pill-duplicate,
html[data-theme="dark"] .history-item.status-duplicate .status-symbol { background: var(--theme-warning-bg); color: var(--amber); }
html[data-theme="dark"] .result-card.status-unverifiable .status-symbol,
html[data-theme="dark"] .status-pill-unverifiable,
html[data-theme="dark"] .history-item.status-unverifiable .status-symbol { background: var(--theme-neutral-bg); color: #c9b7d8; }
html[data-theme="dark"] .result-card .amount-block { background: #2c2136; }
html[data-theme="dark"] .amount-block > strong { color: #eddbfb; }
html[data-theme="dark"] .amount-block > strong > small { color: #c3aacf; }
html[data-theme="dark"] .amount-block .amount-no-data { color: #bfb0cc; }
html[data-theme="dark"] .result-details > div { border-color: var(--line); }
html[data-theme="dark"] .result-details dd { color: #e0d2eb; }
html[data-theme="dark"] .result-details dd.reference { color: #c7b4d8; }
html[data-theme="dark"] .transfer-party-account { color: #c7b4d8; }
html[data-theme="dark"] .payment-type-banner,
html[data-theme="dark"] .history-payment-type { background: #3c2b1e; border-color: #755136; color: #ffc48c; }
html[data-theme="dark"] .wallet-status-line { color: #d6c3e5; }
html[data-theme="dark"] .history-wallet-status { color: #c6b4d6; }
html[data-theme="dark"] .receiver-match,
html[data-theme="dark"] .history-match-line {
  --match-bg: #302637;
  --match-border: #52435e;
  --match-text: #c9b7d8;
}
html[data-theme="dark"] .receiver-match-matched,
html[data-theme="dark"] .receiver-match-possible {
  --match-bg: #1c382d;
  --match-border: #385e4c;
  --match-text: #a1dec0;
}
html[data-theme="dark"] .receiver-match-ambiguous {
  --match-bg: #3c301f;
  --match-border: #6e5731;
  --match-text: #edcb8a;
}
html[data-theme="dark"] .receiver-match-mismatch {
  --match-bg: #402730;
  --match-border: #744653;
  --match-text: #f0b2c3;
}
html[data-theme="dark"] .result-card .receiver-match { background: var(--match-bg); color: var(--match-text); }
html[data-theme="dark"] .receiver-match > .receiver-match-brand { color: inherit; }

/* History, including native date/time and saved filters. */
html[data-theme="dark"] .filter { background: #292130; border-color: var(--line); color: #c7b5d6; }
html[data-theme="dark"] .filter.active { background: #402b57; border-color: #775292; color: #e0c6ff; }
html[data-theme="dark"] .history-item { background: var(--theme-surface); }
html[data-theme="dark"] .history-item:hover { background: #2a2033; }
html[data-theme="dark"] .range-quick-actions button { background: #2c2037; border-color: #554066; color: #d4b8ec; }
html[data-theme="dark"] .range-quick-actions button:hover { background: #402c50; color: #e2cbfa; }
html[data-theme="dark"] .range-endpoint input { color-scheme: dark; }
html[data-theme="dark"] .range-endpoint input::-webkit-calendar-picker-indicator { opacity: .85; }
html[data-theme="dark"] .range-endpoint input:disabled,
html[data-theme="dark"] .receiver-field input:disabled,
html[data-theme="dark"] .receiver-field select:disabled { background: #27222d; color: #a79aad; border-color: #403646; opacity: 1; }
html[data-theme="dark"] .receiver-field select option { background: #251e2d; color: var(--ink); }

/* Receiving account catalog, forms and deletion confirmation. */
html[data-theme="dark"] .scan-receiver-summary { background: #2e213b; border-color: #4d375e; color: #d0b0e8; }
html[data-theme="dark"] .scan-receiver-summary:hover { background: #3b294b; border-color: #79558f; }
html[data-theme="dark"] .receivers-shared-note { background: #2c2138; border-color: #4b385d; color: #c7aadf; }
html[data-theme="dark"] .receiver-account-card { background: var(--theme-surface); }
html[data-theme="dark"] .receiver-account-card.enabled { background: linear-gradient(135deg, #2b2137, #251b30); border-color: #765390; }
html[data-theme="dark"] .receiver-bank-icon { background: #392747; color: #d0acee; }
html[data-theme="dark"] .receiver-account-actions { border-color: var(--line); }
html[data-theme="dark"] .receiver-toggle { color: #c3afcf; }
html[data-theme="dark"] .receiver-toggle input:checked + span { color: #d7b7f7; }
html[data-theme="dark"] .receiver-text-button { color: #c8a1e2; }
html[data-theme="dark"] .receiver-text-button:hover { color: #e6caff; }
html[data-theme="dark"] .receiver-text-button:disabled { color: #a99aae; opacity: 1; }
html[data-theme="dark"] .receiver-remove { color: #e4a6ba; }
html[data-theme="dark"] .receiver-remove:hover { color: #ffc1d2; }
html[data-theme="dark"] .receiver-enable-field { background: #302139; border-color: #543962; }
html[data-theme="dark"] .receiver-delete-account { background: #2c2135; border-color: #4e3b5b; color: #c6b0d6; }

/* Account balances and package information. */
html[data-theme="dark"] .balance-card { background: #33243e; border-color: #543b68; }
html[data-theme="dark"] .credit-card { background: linear-gradient(110deg, #382447, #2c2037); }
html[data-theme="dark"] .token-card { background: var(--theme-surface); border-color: var(--line); }
html[data-theme="dark"] .balance-card:after { border-color: #a882c52b; }
html[data-theme="dark"] .balance-icon,
html[data-theme="dark"] .token-card .balance-icon { background: #473057; color: #d0a8ee; }
html[data-theme="dark"] .tiny-tag { background: #3c2a4b; color: #d3b7e7; }
html[data-theme="dark"] .profile-icon { background: linear-gradient(135deg, #3e2951, #2a1d37); color: #c9a1e9; }
html[data-theme="dark"] .profile-icon > span { background: var(--theme-accent-solid); border-color: var(--theme-surface); }
html[data-theme="dark"] .account-details > div { border-color: var(--line); }
html[data-theme="dark"] .download-card { background: #342442; border-color: #57406b; }
html[data-theme="dark"] .download-card:hover { background: #422e51; }
html[data-theme="dark"] .download-icon { background: #4c345f; color: #ddc0f5; }
html[data-theme="dark"] .logout-button { color: #c5b3d0; }
html[data-theme="dark"] .logout-button:hover { color: #ffc0d1; background: #40232e; }

/* Replace pastel text explicitly so small labels stay legible on dark surfaces. */
html[data-theme="dark"] :is(
  .eyebrow, .gallery-divider, .live-tag, .qr-details summary, .secure-note,
  .upload-zone > small, .upload-zone.gallery-fallback small, .preview-footer > span,
  .mini-tip p, .result-placeholder > p, .status-legend, .today-panel > div > span,
  .result-status-kicker, .amount-block > span, .result-message, .result-details dt,
  .result-details dd .bank-name, .checked-at, .history-summary > div > span,
  .history-summary small, .history-info > small, .history-amount small,
  .list-empty, .range-heading > span, .range-endpoint label, .range-hint,
  .history-found-summary span, .receiver-form-intro, .receiver-field small,
  .receiver-enable-field small, .receivers-toolbar span, .receiver-brand-heading > div > span,
  .receiver-account-heading > div > span,
  .scan-receiver-summary small, .account-balances span, .account-balances small,
  .updated-text, .account-details dt, .download-card small, .app-version,
  .app-version b, .app-version small, .desktop-footer, .desktop-footer > span:first-child,
  .login-heading p, .login-form > label, .login-foot, .floating-receipt > span,
  .receipt-check, .visual-caption, .balance-top, .balance-note, .balance-number small,
  .camera-top .eyebrow
) { color: var(--theme-subtle); }
html[data-theme="dark"] .receiver-delete-content > p:not(.form-error) { color: var(--theme-subtle); }
html[data-theme="dark"] :is(
  .mini-tip strong, .result-placeholder h3, .today-panel strong, .today-panel b,
  .history-info > strong, .history-amount strong, .list-empty strong,
  .range-heading h2, .range-fields legend, .history-found-summary strong,
  .scan-receiver-summary strong, .receivers-shared-note p, .receivers-toolbar strong,
  .receiver-brand-heading h2, .receiver-account-heading strong, .receiver-account-number,
  .receiver-field label, .receiver-enable-field strong, .receiver-delete-account strong,
  .account-details dd, .download-card strong
) { color: var(--theme-text); }
html[data-theme="dark"] :is(
  .history-summary strong, .account-balances strong, .balance-number, .token-card .balance-number
) { color: #dec4f8; }
html[data-theme="dark"] :is(
  .password-wrap > .icon, .password-wrap > .icon-button, .search-wrap .icon,
  .range-heading h2 .icon, .gallery-fallback > .icon, .gallery-fallback > .icon:last-child,
  .upload-actions .icon, .today-panel > .icon-button, .history-item > .icon,
  .scan-receiver-summary > .icon, .download-card > .icon, .balance-top > .icon-button
) { color: #bda2d2; }
html[data-theme="dark"] .list-empty > .icon { color: #967baa; }

@media (max-width: 760px) {
  .header-actions { gap: 10px; }
  .header-actions .theme-toggle { width: 40px; padding: 8px; }
  .header-actions .theme-toggle > span { display: none; }
  html[data-theme="dark"] .login-screen {
    background: radial-gradient(ellipse at 100% 0, #3b2251, transparent 46%), var(--background);
  }
}
@media (max-width: 540px) {
  .header-actions .connection { font-size: 0; gap: 0; }
  .header-actions .connection > span { width: 6px; height: 6px; }
}
@media (max-width: 420px) {
  .app-header .brand-caption { display: none; }
  .header-inner { gap: 10px; }
  .header-actions { gap: 9px; }
}