:root {
  --dm-bg: #121212;
  --dm-bg-secondary: #1e1e1e;
  --dm-surface: #252525;
  --dm-border: #333;
  --dm-text: #e0e0e0;
  --dm-text-muted: #9e9e9e;
  --dm-link: #90caf9;
  --dm-link-hover: #bbdefb;
  --dm-input-bg: #1e1e1e;
  --dm-input-border: #777;
  --dm-btn-bg: #333;
  --dm-btn-text: #e0e0e0;
  --dm-primary: #0b5ed7;
  --dm-primary-hover: #094cae;
}

/* Auto-dark for the OS preference is handled by JS (adds body.dark-mode on
   dark devices when no explicit choice), so the previous
   @media (prefers-color-scheme: dark){ body:not(.light-mode) } block was
   removed — it conflicted with the manual toggle and caused half-dark pages. */



/* ===== MANUAL TOGGLE: body.dark-mode ===== */

body.dark-mode {
  background-color: var(--dm-bg) !important;
  background-image: radial-gradient(#2a2a2a 1px, transparent 1px) !important;
  color: var(--dm-text) !important;
}
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode label,
body.dark-mode .lead,
body.dark-mode .display-1,
body.dark-mode .display-2,
body.dark-mode .display-3,
body.dark-mode .display-4 {
  color: var(--dm-text) !important;
}
body.dark-mode .text-muted,
body.dark-mode .text-secondary,
body.dark-mode small,
body.dark-mode .lead .text-muted {
  color: var(--dm-text-muted) !important;
}
body.dark-mode code { color: #ff8ab8 !important; }
body.dark-mode a { color: var(--dm-link) !important; }
body.dark-mode a:hover { color: var(--dm-link-hover) !important; }
body.dark-mode :focus-visible {
  outline-color: var(--dm-link) !important;
}
body.dark-mode .bootstrap-select .dropdown-toggle:focus-visible {
  outline-color: var(--dm-link) !important;
}

/* Navbar */
body.dark-mode .navbar,
body.dark-mode .nav,
body.dark-mode header {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .site-nav {
  background: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .site-nav .navbar-brand,
body.dark-mode .site-nav .nav-link {
  color: var(--dm-text) !important;
}
body.dark-mode .site-nav .nav-link:hover { color: var(--dm-link) !important; }
body.dark-mode .navbar-toggler {
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .navbar-toggler-icon {
  filter: none !important;
}

/* Footer */
body.dark-mode .site-footer {
  background: var(--dm-bg) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-muted) !important;
}

/* Cards & surfaces */
body.dark-mode .app-card,
body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .card-header,
body.dark-mode .card-footer,
body.dark-mode .search-header,
body.dark-mode .main-container,
body.dark-mode .search-card,
body.dark-mode .genre-card,
body.dark-mode .page-header,
body.dark-mode .app-header-grid,
body.dark-mode .meta-card,
body.dark-mode .sra-card,
body.dark-mode .purge-card,
body.dark-mode .review-card {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .download-card,
body.dark-mode .verify-card,
body.dark-mode .download-stage {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .download-head,
body.dark-mode .download-facts,
body.dark-mode .verify-head,
body.dark-mode .verify-action {
  border-color: var(--dm-border) !important;
}
body.dark-mode .download-detail,
body.dark-mode .download-meta,
body.dark-mode .download-kicker,
body.dark-mode .download-live,
body.dark-mode .download-progress-label,
body.dark-mode .download-fact-label,
body.dark-mode .verify-head p,
body.dark-mode .verify-step span:last-child,
body.dark-mode .verify-note {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .download-track {
  background: var(--dm-btn-bg) !important;
}
body.dark-mode .chart-card,
body.dark-mode .sdk-table,
body.dark-mode .metric-card,
body.dark-mode .dev-link {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .chart-meta,
body.dark-mode .chart-details,
body.dark-mode .metric-updated,
body.dark-mode .dev-link .sub {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .dev-link .legacy {
  color: #ff9a6e !important;
}
body.dark-mode .rank-badge {
  background: var(--dm-btn-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .chart-tab {
  background: transparent !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-link) !important;
}
body.dark-mode .search-card {
  box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}
body.dark-mode .search-header {
  background: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .search-header h1,
body.dark-mode .search-header .lead,
body.dark-mode .search-header .breadcrumb-nav a {
  color: var(--dm-text) !important;
}
body.dark-mode .page-header {
  border-color: var(--dm-border) !important;
}

/* App info page */
body.dark-mode .app-header-grid {
  border-color: var(--dm-border) !important;
}
body.dark-mode .meta-card {
  border-color: var(--dm-border) !important;
}
body.dark-mode .meta-card-title { color: var(--dm-text-muted) !important; }
body.dark-mode .meta-value,
body.dark-mode .meta-value span {
  color: var(--dm-text) !important;
}
body.dark-mode .feature-pill {
  background: #1e2a4a !important;
  color: #7cacf8 !important;
  border-color: #3a5080 !important;
}
body.dark-mode .feature-pill.highlight {
  background: #3d3520 !important;
  color: #ffd95c !important;
  border-color: #665a20 !important;
}
body.dark-mode .border-bottom-light { border-color: var(--dm-border) !important; }
body.dark-mode .sra-card {
  color: var(--dm-text) !important;
}
body.dark-mode .sra-card:hover {
  border-color: var(--dm-link) !important;
  color: var(--dm-link) !important;
}
body.dark-mode .sra-icon-placeholder { background: var(--dm-border) !important; }
body.dark-mode .purge-header {
  background: #3d3520 !important;
  border-color: #665a20 !important;
  color: #ffd95c !important;
}
body.dark-mode .purge-close-btn { color: #ffd95c !important; }
body.dark-mode .screenshot-img { border-color: var(--dm-border) !important; }
body.dark-mode .custom-scrollbar::-webkit-scrollbar-track { background: #1e1e1e !important; }
body.dark-mode .custom-scrollbar::-webkit-scrollbar-thumb { background: #555 !important; }
body.dark-mode .stars-bg { color: #9e9e9e !important; }
body.dark-mode .stars-fill { color: #ffd166 !important; }

/* Price drops page */
body.dark-mode .price-old {
  background: #3a2020 !important;
  color: #ff8a6a !important;
}
body.dark-mode .price-new {
  background: #1a3a2a !important;
  color: #5fd4a8 !important;
}
body.dark-mode .price-old-value { color: #ff9a7a !important; }
body.dark-mode .price-new-value { color: #6ee7a8 !important; }

/* Genre cards */
body.dark-mode .genre-card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
}
body.dark-mode .genre-info .count { color: var(--dm-text-muted) !important; }

/* Pagination */
body.dark-mode .pagination-wrap a,
body.dark-mode .pagination-wrap span {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .pagination-wrap a:hover {
  background: var(--dm-btn-bg) !important;
}
body.dark-mode .pagination-wrap .disabled {
  color: #9e9e9e !important;
}

/* App details list */
body.dark-mode .app-details { color: var(--dm-text-muted) !important; }
body.dark-mode .app-details li { border-color: var(--dm-border) !important; }

/* Buttons */
body.dark-mode .btn-primary,
body.dark-mode .btn-primary-custom,
body.dark-mode .btn-action.btn-get,
body.dark-mode .btn-get,
body.dark-mode .btn-view-app,
body.dark-mode .chart-tab.active,
body.dark-mode .pagination-wrap .active {
  background: var(--dm-primary) !important;
  border-color: var(--dm-primary) !important;
  color: #fff !important;
}
body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-primary-custom:hover,
body.dark-mode .btn-primary-custom:focus,
body.dark-mode .btn-action.btn-get:hover,
body.dark-mode .btn-action.btn-get:focus,
body.dark-mode .btn-get:hover,
body.dark-mode .btn-get:focus,
body.dark-mode .btn-view-app:hover,
body.dark-mode .btn-view-app:focus {
  background: var(--dm-primary-hover) !important;
  border-color: var(--dm-primary-hover) !important;
  color: #fff !important;
}
body.dark-mode .btn-success {
  background: #198754 !important;
  border-color: #198754 !important;
  color: #fff !important;
}
body.dark-mode .btn-info {
  background: #0f6674 !important;
  border-color: #0f6674 !important;
  color: #fff !important;
}
body.dark-mode .btn-danger {
  background: #c82333 !important;
  border-color: #c82333 !important;
  color: #fff !important;
}
body.dark-mode .btn-warning {
  color: #212529 !important;
}
body.dark-mode .btn-light,
body.dark-mode .btn-dark {
  background: var(--dm-btn-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .btn-outline-primary {
  background: transparent !important;
  border-color: var(--dm-link) !important;
  color: var(--dm-link) !important;
}
body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:focus {
  background: var(--dm-primary) !important;
  border-color: var(--dm-primary) !important;
  color: #fff !important;
}
body.dark-mode .btn-outline-dark {
  background: transparent !important;
  border-color: #adb5bd !important;
  color: var(--dm-text) !important;
}
body.dark-mode .btn-outline-danger {
  background: transparent !important;
  border-color: #ff8a8a !important;
  color: #ff8a8a !important;
}
body.dark-mode .btn-outline-success {
  background: transparent !important;
  border-color: #6ee7a8 !important;
  color: #6ee7a8 !important;
}
body.dark-mode .btn-quick {
  background: var(--dm-btn-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-btn-text) !important;
}
body.dark-mode .btn-quick:hover {
  background: #444 !important;
  color: #fff !important;
}
body.dark-mode .btn-paid {
  border-color: #ff6b6b !important;
  color: #ff6b6b !important;
  background: transparent !important;
}
body.dark-mode .btn-paid:hover {
  background: #ff6b6b !important;
  color: #fff !important;
}

/* Form elements */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: var(--dm-input-bg) !important;
  border-color: #777 !important;
  color: var(--dm-text) !important;
}
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-secondary {
  background-color: var(--dm-btn-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-btn-text) !important;
}
body.dark-mode .btn-primary-custom {
  background-color: var(--dm-primary) !important;
  border-color: var(--dm-primary) !important;
  color: #fff !important;
}
body.dark-mode .form-control {
  background-color: var(--dm-input-bg) !important;
  border-color: #777 !important;
  color: var(--dm-text) !important;
}
body.dark-mode .form-control::placeholder {
  color: var(--dm-text-muted) !important;
}
body.dark-mode .bootstrap-select .dropdown-toggle {
  background: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}

/* Bootstrap text utilities */
body.dark-mode .text-dark {
  color: var(--dm-text) !important;
}
body.dark-mode .text-body {
  color: var(--dm-text) !important;
}
body.dark-mode .bg-light {
  background-color: var(--dm-surface) !important;
}
body.dark-mode .bg-white {
  background-color: var(--dm-surface) !important;
}
body.dark-mode .border {
  border-color: var(--dm-border) !important;
}

/* Read more fade gradient */
body.dark-mode .read-more-wrap::after {
  background: linear-gradient(transparent, #121212) !important;
}

/* Box shadows */
body.dark-mode .shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.3) !important;
}
body.dark-mode .shadow {
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.4) !important;
}

/* sra-card text */
body.dark-mode .sra-text {
  color: var(--dm-text) !important;
}

/* Breadcrumb & main content */
body.dark-mode .breadcrumb {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .breadcrumb-item a { color: var(--dm-link) !important; }
body.dark-mode .breadcrumb-item.active { color: var(--dm-text-muted) !important; }
body.dark-mode .main-content {
  background: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* Bootstrap badges */
body.dark-mode .badge-light {
  background-color: var(--dm-btn-bg) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .badge-secondary {
  background-color: #3a3d41 !important;
  color: var(--dm-text) !important;
}
body.dark-mode .badge-info {
  background-color: #1a4a5c !important;
  color: #7dd3fc !important;
}
body.dark-mode .badge-success {
  background-color: #1a3a2a !important;
  color: #6ee7a8 !important;
}
body.dark-mode .badge-warning {
  background-color: #3d3520 !important;
  color: #ffd95c !important;
}
body.dark-mode .badge-danger {
  background-color: #3a2020 !important;
  color: #ff8a8a !important;
}
body.dark-mode .badge-primary {
  background-color: #1a3a6c !important;
  color: #7cacf8 !important;
}
body.dark-mode .badge-dark {
  background-color: #3a3d41 !important;
  color: #fff !important;
}
body.dark-mode .badge-paid {
  background-color: #3a2020 !important;
  border-color: #ff6b6b !important;
  color: #ff9a9a !important;
}

/* Tables */
body.dark-mode .table {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .table td,
body.dark-mode .table th {
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
  background-color: var(--dm-surface) !important;
}
body.dark-mode .table thead th,
body.dark-mode .thead-light th,
body.dark-mode .thead-dark th {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--dm-bg-secondary) !important;
}
body.dark-mode .table-hover tbody tr:hover {
  background-color: var(--dm-btn-bg) !important;
}
body.dark-mode .btn-link {
  color: var(--dm-link) !important;
}
body.dark-mode .btn-link:hover {
  color: var(--dm-link-hover) !important;
}
/* DataTables */
body.dark-mode .dataTables_wrapper,
body.dark-mode .dataTables_info,
body.dark-mode .dataTables_filter,
body.dark-mode .dataTables_length,
body.dark-mode .dataTables_paginate {
  color: var(--dm-text) !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background: var(--dm-surface) !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--dm-btn-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: #fff !important;
}
body.dark-mode hr { border-color: var(--dm-border) !important; }

/* Dark mode toggle */
body.dark-mode .dm-toggle {
  border-color: var(--dm-input-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .dm-toggle:hover { background: #333 !important; }

/* Misc UI */
body.dark-mode .list-group-item {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .alert {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .modal-content {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}
body.dark-mode .dropdown-menu {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .dropdown-item {
  color: var(--dm-text) !important;
}
body.dark-mode .dropdown-item:hover {
  background-color: var(--dm-btn-bg) !important;
}

/* Home page */
body.dark-mode .logo-section h1 { color: var(--dm-text) !important; }

/* Categories page */
body.dark-mode .section-label { color: var(--dm-text-muted) !important; }

/* Empty state */
body.dark-mode .empty-state h4 { color: var(--dm-text-muted) !important; }