:root {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-start: #000000;
  --bg-mid: #060e1e;
  --bg-end: #0B132B;
  --text-primary: #f5f5f5;
  --text-muted: #a8a8a8;
  --text-light: #707070;
  --card-bg: rgba(20, 20, 20, 0.95);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-hover: rgba(30, 30, 30, 0.98);
  --input-bg: rgba(18, 18, 18, 0.96);
  --row-bg: rgba(22, 22, 22, 0.92);
  --row-hover: rgba(35, 35, 35, 0.98);
  --btn-dark: #0a0a0a;
  --btn-dark-text: #ffffff;
  --popup-bg: rgba(18, 18, 18, 0.98);
  --popup-border: rgba(255, 255, 255, 0.1);
  --popup-cancel-bg: rgba(30, 30, 30, 0.92);
  --popup-cancel-bg-hover: rgba(45, 45, 45, 0.96);
  --popup-cancel-border-color: rgba(255, 255, 255, 0.12);
  --popup-cancel-color: #e0e0e0;
  --popup-confirm-bg: #f0f0f0;
  --popup-confirm-color: #0a0a0a;
}

.theme-toggle-btn {
  position: relative;
  width: 58px;
  height: 32px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.82);
  color: #0b1220;
  padding: 0 6px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle-slot {
  display: inline-flex;
  align-items: center;
}

.theme-toggle-slot.theme-toggle-floating {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 10050;
}

.theme-toggle-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 24px rgba(15, 23, 42, 0.2);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.7);
  outline-offset: 2px;
}

.theme-toggle-icon {
  width: 13px;
  height: 13px;
  z-index: 2;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.theme-toggle-icon-sun {
  opacity: 1;
}

.theme-toggle-icon-moon {
  opacity: 0.45;
}

.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.2);
  transition: transform 0.25s cubic-bezier(0.34, 1.45, 0.64, 1), background 0.2s ease, border-color 0.2s ease;
}

html[data-theme="dark"] .theme-toggle-btn {
  background: rgba(20, 20, 20, 0.95);
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .theme-toggle-icon-sun {
  opacity: 0.55;
  color: #cccccc;
}

html[data-theme="dark"] .theme-toggle-icon-moon {
  opacity: 1;
  color: #0a0a0a;
}

html[data-theme="dark"] .theme-toggle-thumb {
  transform: translateX(26px);
  background: #d0d0d0;
  border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(0);
}

html[data-theme="dark"] .nav-right .theme-toggle-slot {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

html[data-theme="dark"] body {
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 45%, var(--bg-end) 100%);
}

html[data-theme="dark"] body.landing-page {
  background: linear-gradient(to right, #000000 0%, #0a0a0a 25%, #0B132B 65%, #131e3a 100%) !important;
}

html[data-theme="dark"] body::before {
  opacity: 0.22;
}

html[data-theme="dark"] .blob {
  opacity: 0.14;
}

html[data-theme="dark"] nav,
html[data-theme="dark"] .nav,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .header {
  background: rgba(10, 10, 10, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .nav-link {
  color: #b0b0b0;
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active {
  background: rgba(35, 35, 35, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
}

html[data-theme="dark"] .btn-outline-action,
html[data-theme="dark"] .btn-nav-user,
html[data-theme="dark"] .findings-count,
html[data-theme="dark"] .findings-search-wrap,
html[data-theme="dark"] .filter-chip {
  background: rgba(22, 22, 22, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e0e0e0 !important;
}

html[data-theme="dark"] .findings-search-wrap input,
html[data-theme="dark"] .findings-search-wrap input::placeholder,
html[data-theme="dark"] .findings-search-wrap svg,
html[data-theme="dark"] .findings-search-clear {
  color: #888888 !important;
}

html[data-theme="dark"] .summary-item,
html[data-theme="dark"] .rq-item,
html[data-theme="dark"] .tbl-head,
html[data-theme="dark"] .finding-row,
html[data-theme="dark"] .cell-snippet,
html[data-theme="dark"] .loc-line,
html[data-theme="dark"] .fix-checkbox-box,
html[data-theme="dark"] .rank-bar-wrap,
html[data-theme="dark"] .pt-bar-wrap,
html[data-theme="dark"] .pt-sev-bar-wrap {
  background: rgba(25, 25, 25, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .summary-item:hover,
html[data-theme="dark"] .rq-item:hover,
html[data-theme="dark"] .finding-row:hover {
  background: rgba(38, 38, 38, 0.92) !important;
}

html[data-theme="dark"] .th,
html[data-theme="dark"] .cell-code,
html[data-theme="dark"] .cell-owasp,
html[data-theme="dark"] .issue-fix,
html[data-theme="dark"] .rq-item-why,
html[data-theme="dark"] .rank-label,
html[data-theme="dark"] .pt-sev-label,
html[data-theme="dark"] .pt-sev-count {
  color: #b8b8b8 !important;
}

html[data-theme="dark"] .issue-title,
html[data-theme="dark"] .cell-file,
html[data-theme="dark"] .loc-file,
html[data-theme="dark"] .rq-item-title,
html[data-theme="dark"] .rank-count {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .findings-table-wrap,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .remediation-card {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .btn-discard,
html[data-theme="dark"] .btn-cancel,
html[data-theme="dark"] .toggle-btn:not(.active),
html[data-theme="dark"] .lang-btn:not(.active),
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .sort-select,
html[data-theme="dark"] .page-btn,
html[data-theme="dark"] .action-btn,
html[data-theme="dark"] .drawer-btn-outline {
  background: rgba(28, 28, 28, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e0e0e0 !important;
}

html[data-theme="dark"] .btn-discard:hover,
html[data-theme="dark"] .btn-cancel:hover,
html[data-theme="dark"] .toggle-btn:not(.active):hover,
html[data-theme="dark"] .lang-btn:not(.active):hover,
html[data-theme="dark"] .search-input:focus,
html[data-theme="dark"] .filter-btn:hover,
html[data-theme="dark"] .sort-select:focus,
html[data-theme="dark"] .page-btn:hover,
html[data-theme="dark"] .action-btn:hover,
html[data-theme="dark"] .drawer-btn-outline:hover {
  background: rgba(45, 45, 45, 0.98) !important;
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .upload-area,
html[data-theme="dark"] .upload-icon,
html[data-theme="dark"] .upload-formats span,
html[data-theme="dark"] .scan-row,
html[data-theme="dark"] .empty-recent {
  background: rgba(20, 20, 20, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .upload-area:hover,
html[data-theme="dark"] .scan-row:hover {
  background: rgba(35, 35, 35, 0.96) !important;
}

html[data-theme="dark"] .search-input::placeholder,
html[data-theme="dark"] .sort-select,
html[data-theme="dark"] .upload-sub,
html[data-theme="dark"] .file-meta {
  color: #888888 !important;
}

html[data-theme="dark"] .upload-title,
html[data-theme="dark"] .file-name,
html[data-theme="dark"] .issues-count {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .lang-pill {
  background: rgba(30, 30, 30, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e0e0e0 !important;
}

html[data-theme="dark"] .chat-panel {
  background: rgba(10, 10, 10, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .chat-panel-body {
  background: transparent !important;
}

html[data-theme="dark"] .chat-panel-coming {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .chat-panel-coming-sub {
  color: #999999 !important;
}

html[data-theme="dark"] .chat-panel-input-row {
  background: rgba(12, 12, 12, 0.97) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .chat-panel-input {
  background: rgba(22, 22, 22, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ebebeb !important;
}

html[data-theme="dark"] .chat-panel-input::placeholder {
  color: #888888 !important;
}

html[data-theme="dark"] .card {
  background: rgba(18, 18, 18, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .field input {
  background: rgba(20, 20, 20, 0.97) !important;
  color: #ebebeb !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .field input:focus {
  background: rgba(30, 30, 30, 1) !important;
  color: #f5f5f5 !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .field input::placeholder {
  color: #888888 !important;
}

html[data-theme="dark"] .field input:-webkit-autofill,
html[data-theme="dark"] .field input:-webkit-autofill:hover,
html[data-theme="dark"] .field input:-webkit-autofill:focus,
html[data-theme="dark"] .field input:-webkit-autofill:active {
  -webkit-text-fill-color: #ebebeb !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(20, 20, 20, 0.97) inset !important;
  box-shadow: 0 0 0 1000px rgba(20, 20, 20, 0.97) inset !important;
  transition: background-color 9999s ease-out 0s;
}

html[data-theme="dark"] .scanning-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html[data-theme="dark"] .modal {
  background: var(--popup-bg) !important;
  border: 1px solid var(--popup-border) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .scanning-modal {
  background: rgba(15, 15, 15, 0.97) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .scanning-title {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .scanning-sub,
html[data-theme="dark"] .scan-progress-label {
  color: #999999 !important;
}

html[data-theme="dark"] .scan-progress-bar {
  background: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .fix-popup-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html[data-theme="dark"] .fix-popup {
  background: rgba(15, 15, 15, 0.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .fix-popup-title {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .fix-popup-close {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #c0c0c0 !important;
}

html[data-theme="dark"] .fix-popup-close:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .fix-popup-code {
  background: rgba(8, 8, 8, 0.97) !important;
  color: #e8e8e8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .btn-dismiss-fix {
  background: rgba(28, 28, 28, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e0e0e0 !important;
}

/* ── Logout popup: global fixes ── */
.logout-popup-btn { white-space: nowrap; }

html[data-theme="dark"] .logout-popup {
  background: var(--popup-bg) !important;
  border: 1px solid var(--popup-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .logout-popup p {
  color: #f0f0f0 !important;
}
html[data-theme="dark"] .logout-popup-cancel {
  background: var(--popup-cancel-bg) !important;
  border-color: var(--popup-cancel-border-color) !important;
  color: var(--popup-cancel-color) !important;
}
html[data-theme="dark"] .logout-popup-cancel:hover {
  background: var(--popup-cancel-bg-hover) !important;
}
html[data-theme="dark"] .logout-popup-confirm {
  background: var(--popup-confirm-bg) !important;
  color: var(--popup-confirm-color) !important;
  box-shadow: 0 2px 8px rgba(1, 8, 24, 0.35) !important;
}
html[data-theme="dark"] .logout-popup-confirm:hover {
  filter: brightness(1.08);
}

@media (max-width: 760px) {
  .theme-toggle-slot.theme-toggle-floating {
    top: 12px;
    right: 12px;
  }
}

/* ── Dark mode: logout button → white bg, black text ── */
html[data-theme="dark"] .btn-logout {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}
html[data-theme="dark"] .btn-logout:hover {
  background: #e8e8e8 !important;
  color: #000000 !important;
}

/* ── Dark mode: new-scan method toggle active button ── */
html[data-theme="dark"] .toggle-btn.active {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* ── Dark mode: language selector active button ── */
html[data-theme="dark"] .lang-btn.active {
  background: rgba(240, 240, 240, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .lang-btn.active:hover {
  background: rgba(240, 240, 240, 0.3) !important;
}

/* ── Dark mode: run scan button ── */
html[data-theme="dark"] .btn-run-scan {
  background: #ffffff !important;
  color: #000000 !important;
}
html[data-theme="dark"] .btn-run-scan:hover {
  background: #e8e8e8 !important;
  color: #000000 !important;
}

/* ── Dark mode: settings save changes button ── */
html[data-theme="dark"] .btn-save {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}
html[data-theme="dark"] .btn-save:hover {
  background: #e8e8e8 !important;
  color: #000000 !important;
}

/* ── Dark mode: scan history active filter button ── */
html[data-theme="dark"] .filter-btn.active {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* ── Dark mode: sign-in / sign-up submit button ── */
html[data-theme="dark"] .btn-submit {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}
html[data-theme="dark"] .btn-submit:hover {
  background: #e8e8e8 !important;
  color: #000000 !important;
}

/* ── Dark mode: new scan button (dashboard + scan history) ── */
html[data-theme="dark"] .btn-new-scan {
  background: #ffffff !important;
  color: #000000 !important;
}
html[data-theme="dark"] .btn-new-scan:hover {
  background: #e8e8e8 !important;
  color: #000000 !important;
}
html[data-theme="dark"] .btn-new-scan svg {
  color: #000000 !important;
}

/* ── Dark mode: paste code textarea ── */
html[data-theme="dark"] textarea#code-input {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #f0f0f0 !important;
}
html[data-theme="dark"] textarea#code-input:focus {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
html[data-theme="dark"] textarea#code-input::placeholder {
  color: #888888 !important;
}

/* ── Dark mode: landing page overrides ── */
html[data-theme="dark"] body.landing-page .btn-dark {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}
html[data-theme="dark"] body.landing-page .btn-dark:hover {
  background: #e8e8e8 !important;
  color: #000000 !important;
}
html[data-theme="dark"] body.landing-page .btn-outline,
html[data-theme="dark"] body.landing-page .btn-secondary-cta,
html[data-theme="dark"] body.landing-page .nav-login {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #f5f5f5 !important;
}
html[data-theme="dark"] body.landing-page .btn-outline:hover,
html[data-theme="dark"] body.landing-page .btn-secondary-cta:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}
html[data-theme="dark"] body.landing-page .logo {
  color: #ffffff !important;
}
html[data-theme="dark"] body.landing-page .hero-sub {
  color: rgba(245, 245, 245, 0.9) !important;
}
html[data-theme="dark"] body.landing-page .typewriter-cursor {
  background: #e0e0e0 !important;
}
html[data-theme="dark"] body.landing-page .blob-1 {
  background: radial-gradient(circle, #444444, transparent 70%) !important;
}
html[data-theme="dark"] body.landing-page .blob-2 {
  background: radial-gradient(circle, #333333, transparent 70%) !important;
}
html[data-theme="dark"] body.landing-page .blob-3 {
  background: radial-gradient(circle, #555555, transparent 70%) !important;
}
html[data-theme="dark"] body.landing-page .chip {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e8e8e8 !important;
}
html[data-theme="dark"] body.landing-page .chip:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}
html[data-theme="dark"] body.landing-page .chip-dot {
  background: rgba(220, 220, 220, 0.7) !important;
}
html[data-theme="dark"] body.landing-page .chips-ticker::before {
  background: linear-gradient(to right, #000000 0%, transparent 100%) !important;
}
html[data-theme="dark"] body.landing-page .chips-ticker::after {
  background: linear-gradient(to left, #0B132B 0%, transparent 100%) !important;
}
html[data-theme="dark"] body.landing-page .dash-preview {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
html[data-theme="dark"] body.landing-page .hero-col::before {
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3) !important;
}