/* ================================================
   THEME MODES (GLOBAL)
   Applies to all pages that include this file.
   ================================================ */

/* ===== THEME BASE RULES (APPLY TO ALL NON-DEFAULT THEMES) ===== */
body[data-theme] {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
  --bs-primary: var(--theme-accent);
  --bs-soft-primary: var(--theme-accent-soft);
  --nav-link-color: var(--theme-text);
  --heading-color: var(--theme-text);
}

body[data-theme] .content-wrapper,
body[data-theme] .wrapper,
body[data-theme] header,
body[data-theme] section {
  background-color: var(--theme-bg) !important;
}

body[data-theme] .wrapper.bg-light,
body[data-theme] .article {
  background-color: var(--theme-bg) !important;
}

body[data-theme] .card,
body[data-theme] .navbar,
body[data-theme] .navbar.navbar-light,
body[data-theme] .navbar.bg-white,
body[data-theme] footer,
body[data-theme] .dropdown-menu,
body[data-theme] .modal-content,
body[data-theme] .list-group-item,
body[data-theme] .offcanvas,
body[data-theme] .accordion-item,
body[data-theme] .table,
body[data-theme] .table thead th,
body[data-theme] .table tbody td {
  background-color: var(--theme-surface) !important;
  color: var(--theme-surface-text, var(--theme-text)) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .dropdown-item-text,
body[data-theme] .dropdown-item-text strong {
  color: var(--theme-text) !important;
}

body[data-theme] footer,
body[data-theme] footer .text-white,
body[data-theme] footer h1,
body[data-theme] footer h2,
body[data-theme] footer h3,
body[data-theme] footer h4,
body[data-theme] footer h5,
body[data-theme] footer h6,
body[data-theme] footer .widget-title {
  color: var(--theme-text) !important;
}

body[data-theme] footer a,
body[data-theme] footer .text-white-50,
body[data-theme] footer .link-body,
body[data-theme] footer .list-unstyled a {
  color: var(--theme-muted) !important;
}

body[data-theme] footer a:hover {
  color: var(--theme-accent) !important;
}

body[data-theme] .settings-card-mobile {
  background-color: transparent !important;
}

body[data-theme] .bg-light,
body[data-theme] .bg-white,
body[data-theme] .bg-body,
body[data-theme] .bg-body-tertiary,
body[data-theme] .bg-soft-primary {
  background-color: var(--theme-surface) !important;
}

body[data-theme] h1,
body[data-theme] h2,
body[data-theme] h3,
body[data-theme] h4,
body[data-theme] h5,
body[data-theme] h6,
body[data-theme] .card-title,
body[data-theme] .modal-title,
body[data-theme] .navbar-brand,
body[data-theme] .nav-link,
body[data-theme] .text-dark {
  color: var(--theme-accent) !important;
}

body[data-theme] .navbar-nav .nav-link,
body[data-theme] .offcanvas .navbar-nav .nav-link {
  color: var(--theme-text) !important;
}

body[data-theme] .navbar-nav .nav-link.active,
body[data-theme] .nav-link.active,
body[data-theme] .nav-link:hover,
body[data-theme] .nav-tabs .nav-link.active,
body[data-theme] .offcanvas .navbar-nav .nav-link.active,
body[data-theme] .offcanvas .navbar-nav .nav-link:hover {
  color: var(--theme-accent) !important;
}

body[data-theme] .text-muted,
body[data-theme] .text-secondary,
body[data-theme] .form-text,
body[data-theme] small {
  color: var(--theme-muted) !important;
}

body[data-theme] a {
  color: var(--theme-accent) !important;
}

body[data-theme] a:hover {
  color: var(--theme-accent-hover, var(--theme-accent)) !important;
}

body[data-theme] .border,
body[data-theme] hr {
  border-color: var(--theme-border) !important;
}

body[data-theme] .form-control,
body[data-theme] .form-select,
body[data-theme] .input-group-text {
  background-color: var(--theme-surface) !important;
  color: var(--theme-surface-text, var(--theme-text)) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .form-control::placeholder,
body[data-theme] textarea::placeholder,
body[data-theme] input::placeholder {
  color: var(--theme-muted) !important;
  opacity: 0.85;
}

body[data-theme] .form-control:focus,
body[data-theme] .form-select:focus,
body[data-theme] .btn:focus,
body[data-theme] .btn:focus-visible {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 0.2rem var(--theme-ring) !important;
}

body[data-theme] .btn-primary {
  background-color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
}

body[data-theme] .btn-outline-primary {
  color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
}

body[data-theme] .btn-outline-primary:hover {
  background-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
}

body[data-theme] .btn-success,
body[data-theme] .btn-danger,
body[data-theme] .btn-info {
  color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
}

body[data-theme] .btn i,
body[data-theme] .btn svg,
body[data-theme] .btn .bi,
body[data-theme] .btn .uil,
body[data-theme] .btn .fa,
body[data-theme] .btn .fas,
body[data-theme] .btn .far,
body[data-theme] .btn .fab,
body[data-theme] .btn .fal,
body[data-theme] .btn .fad,
body[data-theme] .btn .fa-solid,
body[data-theme] .btn .fa-regular,
body[data-theme] .btn .fa-brands {
  color: inherit !important;
}

body[data-theme] .btn-soft-primary,
body[data-theme] .bg-soft-primary {
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .text-primary,
body[data-theme] .text-success,
body[data-theme] .text-info,
body[data-theme] .text-warning,
body[data-theme] .text-danger {
  color: var(--theme-accent) !important;
}

body[data-theme] .icon.btn.btn-soft-primary,
body[data-theme] .icon.btn.btn-circle {
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
  color: var(--theme-accent) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .icon.btn.btn-soft-primary .number {
  color: var(--theme-accent) !important;
}

body[data-theme] .icon-list li i {
  color: var(--theme-accent) !important;
}

body[data-theme] .progress-bar,
body[data-theme] .badge.bg-primary {
  background-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
}

body[data-theme] .text-primary {
  color: var(--theme-accent) !important;
}

body[data-theme] .bi,
body[data-theme] .uil,
body[data-theme] .fa,
body[data-theme] .fas,
body[data-theme] .far,
body[data-theme] .fab,
body[data-theme] .fal,
body[data-theme] .fad,
body[data-theme] .fa-solid,
body[data-theme] .fa-regular,
body[data-theme] .fa-brands,
body[data-theme] i[class^="bi-"],
body[data-theme] i[class*=" bi-"] {
  color: var(--theme-icon) !important;
  opacity: var(--theme-icon-opacity, 1);
}

body[data-theme] .settings-card-mobile .card,
body[data-theme] .settings-card-mobile .card-body {
  border-color: var(--theme-border) !important;
}

body[data-theme] .quick-presets-mobile,
body[data-theme] .quick-presets-mobile .card,
body[data-theme] .quick-presets-mobile .card-body {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .preset-card {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .preset-card .preset-title,
body[data-theme] .preset-card .preset-emoji {
  color: var(--theme-text) !important;
}

body[data-theme] .preset-card:hover {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 1px rgba(var(--theme-accent-rgb), 0.2) !important;
}

body[data-theme] .items-container,
body[data-theme] #itemsList {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .item-entry {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

body[data-theme] .item-entry input,
body[data-theme] .item-entry select,
body[data-theme] .item-entry textarea {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .leaderboard-item,
body[data-theme] .leaderboard-item-left,
body[data-theme] .leaderboard-name,
body[data-theme] .leaderboard-rank,
body[data-theme] .leaderboard-count,
body[data-theme] .leaderboard-combo-text {
  color: var(--theme-text) !important;
}

body[data-theme] .leaderboard-item {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .leaderboard-item:hover {
  box-shadow: 0 0 0 1px rgba(var(--theme-accent-rgb), 0.2) !important;
}

body[data-theme] .winners-scroll-container,
body[data-theme] #historyList {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

body[data-theme] .winners-scroll-container p,
body[data-theme] .winners-scroll-container small {
  color: var(--theme-muted) !important;
}

body[data-theme] .spin-mode-selector-mobile,
body[data-theme] .spin-mode-selector-mobile .card,
body[data-theme] .spin-mode-selector-mobile .card-body {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .spin-mode-card {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .spin-mode-card .mode-title,
body[data-theme] .spin-mode-card small {
  color: var(--theme-muted) !important;
}

body[data-theme] .spin-mode-card.active {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 1px rgba(var(--theme-accent-rgb), 0.2) !important;
}

body[data-theme] .wheel-wrapper,
body[data-theme] #wheel,
body[data-theme] .coin-container,
body[data-theme] .centerspin-container,
body[data-theme] .slot-container,
body[data-theme] .lucky-container {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 20px var(--theme-wheel-glow) !important;
}

body[data-theme] .centerspin-pointer {
  border-top: 3px solid var(--theme-accent) !important;
  border-bottom: 3px solid var(--theme-accent) !important;
}

body[data-theme] .centerspin-reel-wrapper {
  border: 2px solid var(--theme-accent);
}

body[data-theme] .slot-reel {
  border: 2px solid var(--theme-accent);
}

body[data-theme] .slot-reel-window {
  border: 3px solid var(--theme-accent);
}

body[data-theme] .lucky-pointer {
  background: linear-gradient(180deg, transparent 0%, var(--theme-accent) 20%, var(--theme-accent) 80%, transparent 100%);
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.8);
}

body[data-theme] .lucky-pointer::before {
  border-top: 15px solid var(--theme-accent);
}

body[data-theme] .lucky-pointer::after {
  border-bottom: 15px solid var(--theme-accent);
}

body[data-theme] .btn-theme-color {
  color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
}

body[data-theme] input[type="range"]::-webkit-slider-thumb {
  background: var(--theme-accent);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

body[data-theme] input[type="range"]::-moz-range-thumb {
  background: var(--theme-accent);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

body[data-theme] .form-check-input:checked {
  background-color: var(--theme-accent);
  border-color: var(--theme-accent);
}

body[data-theme] .btn-sm {
  background-color: transparent;
  border: 1px solid var(--theme-accent) !important;
  color: var(--theme-accent) !important;
}

body[data-theme] .heading-color {
  color: var(--theme-accent) !important;
}

body[data-theme] .pointer {
  border-top-color: var(--theme-accent) !important;
}

body[data-theme] #mainSpinBtn,
body[data-theme] #centerSpinBtn,
body[data-theme] #comboSpinBtn,
body[data-theme] #luckyBoxBtn,
body[data-theme] #mainRollBtn {
  background-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
}

body[data-theme] #mainSpinBtn:hover,
body[data-theme] #centerSpinBtn:hover,
body[data-theme] #comboSpinBtn:hover,
body[data-theme] #luckyBoxBtn:hover,
body[data-theme] #mainRollBtn:hover,
body[data-theme] #mainSpinBtn:active,
body[data-theme] #centerSpinBtn:active,
body[data-theme] #comboSpinBtn:active,
body[data-theme] #luckyBoxBtn:active,
body[data-theme] #mainRollBtn:active,
body[data-theme] #mainSpinBtn:focus,
body[data-theme] #centerSpinBtn:focus,
body[data-theme] #mainRollBtn:focus {
  background-color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
}

/* ===== PAGE-SPECIFIC ELEMENTS (home, random-pickers, tools, etc.) ===== */
body[data-theme] .picker-card,
body[data-theme] .picker-item .picker-card {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .picker-card:hover {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 4px 18px var(--theme-ring) !important;
}

body[data-theme] .picker-card h3,
body[data-theme] .picker-card .card-icon {
  color: var(--theme-text) !important;
}

body[data-theme] .picker-card p {
  color: var(--theme-muted) !important;
}

body[data-theme] .spin-mode-tag {
  color: var(--theme-accent) !important;
}

body[data-theme] .category-section {
  border-top-color: var(--theme-border) !important;
}

body[data-theme] .hero-gradient {
  background: var(--theme-bg) !important;
}

body[data-theme] .section-frame,
body[data-theme] .wrapper.bg-soft-primary {
  background-color: var(--theme-bg) !important;
}

/* Blog hero (listing + article) */
body[data-theme] .section-frame .wrapper.bg-soft-primary,
body[data-theme] .image-wrapper.bg-overlay {
  background-color: var(--theme-bg) !important;
}

body[data-theme] .image-wrapper.bg-overlay::before {
  background: rgba(0, 0, 0, 0.45) !important;
}

body[data-theme] .link-dark {
  color: var(--theme-accent) !important;
}

body[data-theme] .link-dark:hover {
  color: var(--theme-accent-hover, var(--theme-accent)) !important;
}

body[data-theme] .post-title a,
body[data-theme] .post-content {
  color: var(--theme-text) !important;
}

body[data-theme] .feature-icon {
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
  color: var(--theme-accent) !important;
}

body[data-theme] .step-number {
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
  color: var(--theme-accent) !important;
}

body[data-theme] .alert {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .theme-card {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .theme-card.is-selected {
  border-color: var(--theme-accent) !important;
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
}

body[data-theme] .spin-center-btn {
  background-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
  border-color: var(--theme-accent) !important;
}

body[data-theme] .overlay {
  background-color: var(--theme-surface) !important;
}

body[data-theme] .card-img-top {
  border-color: var(--theme-border) !important;
}

/* Navbar sticky state - ensure theme applies when navbar sticks */
body[data-theme] .navbar-stick,
body[data-theme] .navbar-stick.navbar-light {
  background-color: var(--theme-surface) !important;
}

/* Blog breadcrumb active item - readable on all themes */
body[data-theme] .breadcrumb-item.active {
  color: var(--theme-text) !important;
}

body[data-theme] .breadcrumb-item a {
  color: var(--theme-muted) !important;
}

body[data-theme] .breadcrumb-item a:hover {
  color: var(--theme-accent) !important;
}

body[data-theme] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--theme-muted) !important;
}

/* Blog article social share icons */
body[data-theme] .nav.social a {
  background-color: var(--theme-surface) !important;
  color: var(--theme-accent) !important;
  border: 1px solid var(--theme-border) !important;
}

body[data-theme] .nav.social a:hover {
  background-color: rgba(var(--theme-accent-rgb), 0.15) !important;
  color: var(--theme-accent) !important;
}

body[data-theme] .nav.social a i,
body[data-theme] .nav.social a .uil {
  color: var(--theme-accent) !important;
}

/* ===== CRYPTO THEME (Tech & Trust) ===== */
body[data-theme="crypto"] {
  --theme-bg: #0a0f1f;
  --theme-surface: #172554;
  --theme-text: #e2e8f0;
  --theme-surface-text: #e2e8f0;
  --theme-muted: #94a3b8;
  --theme-accent: #06b6d4;
  --theme-accent-hover: #2dd4bf;
  --theme-accent-soft: #cffafe;
  --theme-accent-rgb: 6, 182, 212;
  --theme-border: rgba(14, 116, 144, 0.35);
  --theme-icon: #e2e8f0;
  --theme-icon-opacity: 0.85;
  --theme-ring: rgba(6, 182, 212, 0.2);
  --theme-wheel-glow: rgba(6, 182, 212, 0.15);
}

/* ===== DARK THEME (Modern & Minimal) ===== */
body[data-theme="dark"] {
  --theme-bg: #0f1117;
  --theme-surface: #1e2129;
  --theme-text: #e5e7eb;
  --theme-surface-text: #e5e7eb;
  --theme-muted: #9ca3af;
  --theme-accent: #6366f1;
  --theme-accent-hover: #7c83ff;
  --theme-accent-soft: #e0e7ff;
  --theme-accent-rgb: 99, 102, 241;
  --theme-border: rgba(99, 102, 241, 0.25);
  --theme-icon: #f3f4f6;
  --theme-icon-opacity: 0.9;
  --theme-ring: rgba(99, 102, 241, 0.25);
  --theme-wheel-glow: rgba(99, 102, 241, 0.2);
}

/* ===== GAMING THEME (Energetic but Controlled) ===== */
body[data-theme="gaming"] {
  --theme-bg: #0c0e1a;
  --theme-surface: #1e293b;
  --theme-text: #f1f5f9;
  --theme-surface-text: #f1f5f9;
  --theme-muted: #94a3b8;
  --theme-accent: #3b82f6;
  --theme-accent-hover: #a855f7;
  --theme-accent-soft: #dbeafe;
  --theme-accent-rgb: 59, 130, 246;
  --theme-border: rgba(59, 130, 246, 0.35);
  --theme-icon: #e2e8f0;
  --theme-icon-opacity: 0.95;
  --theme-ring: rgba(59, 130, 246, 0.35);
  --theme-wheel-glow: rgba(20, 184, 166, 0.35);
}

/* ===== HIGH CONTRAST (Accessibility) ===== */
body[data-theme="high-contrast"] {
  --theme-bg: #000000;
  --theme-surface: #ffffff;
  --theme-text: #ffffff;
  --theme-surface-text: #000000;
  --theme-muted: #1f2937;
  --theme-accent: #00aaff;
  --theme-accent-hover: #00cc99;
  --theme-accent-soft: #dbeafe;
  --theme-accent-rgb: 0, 170, 255;
  --theme-border: #000000;
  --theme-icon: #000000;
  --theme-icon-opacity: 1;
  --theme-ring: rgba(0, 170, 255, 1);
  --theme-wheel-glow: rgba(0, 170, 255, 0.4);
  --theme-button-text: #000000;
}

body[data-theme="high-contrast"] .text-muted {
  color: #1f2937 !important;
}

body[data-theme="high-contrast"] .text-dark {
  color: #000000 !important;
}

body[data-theme="high-contrast"] .wrapper.bg-light,
body[data-theme="high-contrast"] .article,
body[data-theme="high-contrast"] .content-wrapper,
body[data-theme="high-contrast"] section {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body[data-theme="high-contrast"] .navbar,
body[data-theme="high-contrast"] .navbar-nav .nav-link,
body[data-theme="high-contrast"] .navbar-brand {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body[data-theme="high-contrast"] .navbar-nav .nav-link.active,
body[data-theme="high-contrast"] .navbar-nav .nav-link:hover {
  color: #00aaff !important;
}

body[data-theme="high-contrast"] footer,
body[data-theme="high-contrast"] footer * {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body[data-theme="high-contrast"] footer a {
  color: #000000 !important;
}

body[data-theme="high-contrast"] .leaderboard-item,
body[data-theme="high-contrast"] .preset-card,
body[data-theme="high-contrast"] .items-container,
body[data-theme="high-contrast"] .item-entry {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body[data-theme="high-contrast"] .item-entry input,
body[data-theme="high-contrast"] .item-entry select,
body[data-theme="high-contrast"] .item-entry textarea,
body[data-theme="high-contrast"] #itemsList input,
body[data-theme="high-contrast"] #itemsList select,
body[data-theme="high-contrast"] #itemsList textarea {
  color: #000000 !important;
}

body[data-theme="high-contrast"] .quick-presets-mobile .preset-title {
  color: #000000 !important;
}

body[data-theme="high-contrast"] .card,
body[data-theme="high-contrast"] .card-body,
body[data-theme="high-contrast"] .dropdown-menu,
body[data-theme="high-contrast"] .modal-content,
body[data-theme="high-contrast"] .list-group-item,
body[data-theme="high-contrast"] .offcanvas,
body[data-theme="high-contrast"] .accordion-item,
body[data-theme="high-contrast"] .settings-card-mobile .card,
body[data-theme="high-contrast"] .settings-card-mobile .card-body,
body[data-theme="high-contrast"] .quick-presets-mobile,
body[data-theme="high-contrast"] .spin-mode-selector-mobile,
body[data-theme="high-contrast"] .spin-mode-card {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

body[data-theme="high-contrast"] .card *,
body[data-theme="high-contrast"] .dropdown-menu *,
body[data-theme="high-contrast"] .modal-content *,
body[data-theme="high-contrast"] .list-group-item *,
body[data-theme="high-contrast"] .offcanvas *,
body[data-theme="high-contrast"] .accordion-item *,
body[data-theme="high-contrast"] .quick-presets-mobile *,
body[data-theme="high-contrast"] .spin-mode-card *,
body[data-theme="high-contrast"] .leaderboard-item *,
body[data-theme="high-contrast"] .items-container * {
  color: #000000 !important;
}

/* Improve SVG icon visibility on dark themes */
body[data-theme="dark"] .icon-svg,
body[data-theme="studio"] .icon-svg,
body[data-theme="gaming"] .icon-svg,
body[data-theme="crypto"] .icon-svg,
body[data-theme="high-contrast"] .icon-svg {
  filter: brightness(0) invert(1) opacity(0.85);
}

body[data-theme="high-contrast"] .form-control,
body[data-theme="high-contrast"] .form-select,
body[data-theme="high-contrast"] .input-group-text {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

body[data-theme="high-contrast"] .btn,
body[data-theme="high-contrast"] .btn:focus,
body[data-theme="high-contrast"] .btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(0, 170, 255, 1) !important;
}

/* ===== MINIMAL THEME (Ultra Clean) ===== */
body[data-theme="minimal"] {
  --theme-bg: #ffffff;
  --theme-surface: #f8fafc;
  --theme-text: #0f172a;
  --theme-surface-text: #0f172a;
  --theme-muted: #64748b;
  --theme-accent: #3b82f6;
  --theme-accent-hover: #2563eb;
  --theme-accent-soft: #e0f2fe;
  --theme-accent-rgb: 59, 130, 246;
  --theme-border: #e2e8f0;
  --theme-icon: #0f172a;
  --theme-icon-opacity: 1;
  --theme-ring: rgba(59, 130, 246, 0.25);
  --theme-wheel-glow: rgba(59, 130, 246, 0.2);
  --theme-button-text: #ffffff;
}

body[data-theme="minimal"] .card,
body[data-theme="minimal"] .dropdown-menu,
body[data-theme="minimal"] .modal-content,
body[data-theme="minimal"] .offcanvas,
body[data-theme="minimal"] .btn,
body[data-theme="minimal"] .form-control,
body[data-theme="minimal"] .form-select {
  border-radius: 6px !important;
  box-shadow: none !important;
}

body[data-theme="minimal"] .wheel-wrapper,
body[data-theme="minimal"] #wheel,
body[data-theme="minimal"] .coin-container,
body[data-theme="minimal"] .centerspin-container,
body[data-theme="minimal"] .slot-container,
body[data-theme="minimal"] .lucky-container {
  box-shadow: none !important;
}

/* ===== STUDIO THEME (Focus / Recording Mode) ===== */
body[data-theme="studio"] {
  --theme-bg: #070707;
  --theme-surface: #0f0f0f;
  --theme-text: #d1d5db;
  --theme-surface-text: #d1d5db;
  --theme-muted: rgba(107, 114, 128, 0.7);
  --theme-accent: #64748b;
  --theme-accent-hover: #94a3b8;
  --theme-accent-soft: #e2e8f0;
  --theme-accent-rgb: 100, 116, 139;
  --theme-border: #111111;
  --theme-icon: #d1d5db;
  --theme-icon-opacity: 0.6;
  --theme-ring: rgba(100, 116, 139, 0.2);
  --theme-wheel-glow: rgba(255, 255, 255, 0.35);
}

body[data-theme="studio"] .settings-card-mobile,
body[data-theme="studio"] footer {
  opacity: 0.7;
}

/* Studio: navbar must stay fully opaque so dropdowns remain clickable (no opacity/z-index issues) */
body[data-theme="studio"] .navbar,
body[data-theme="studio"] .navbar .dropdown-menu {
  opacity: 1 !important;
}

body[data-theme="studio"] .navbar .dropdown-menu {
  z-index: 1050 !important;
}