:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

[data-theme-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0.35rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
    color 0.2s ease;
}

[data-theme-toggle]:hover {
  background-color: rgba(59, 130, 246, 0.12);
}

[data-theme-toggle]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

[data-theme-toggle] .theme-toggle-icon {
  pointer-events: none;
}

html.dark [data-theme-toggle] {
  color: #38bdf8;
}

html.dark [data-theme-toggle]:hover {
  background-color: rgba(56, 189, 248, 0.18);
}

html.dark [data-theme-toggle]:focus-visible {
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35);
}

html.dark body {
  background-color: #020617;
  color: #e2e8f0;
}

html.dark header,
html.dark header.bg-white,
html.dark header.fixed-nav {
  background-color: rgba(15, 23, 42, 0.92);
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 15px 40px rgba(2, 6, 23, 0.45);
}

html.dark .builder-header-bar,
html.dark .preowned-header-bar {
  color: inherit;
}

html.dark .preowned-header-bar a {
  color: inherit;
}

html.dark .preowned-header-bar a:hover {
  color: #60a5fa;
}

html.dark .bg-white {
  background-color: #0f172a !important;
  color: inherit;
}

html.dark .bg-gray-50,
html.dark .bg-slate-50 {
  background-color: #0b1627 !important;
}

html.dark .bg-gray-100,
html.dark .bg-slate-100 {
  background-color: #13203b !important;
}

html.dark .bg-gray-200,
html.dark .bg-slate-200 {
  background-color: rgba(148, 163, 184, 0.16) !important;
  color: #e2e8f0 !important;
}

html.dark .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.18) !important;
  color: #bfdbfe !important;
}

html.dark .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;
}

html.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.12) !important;
  color: #a7f3d0 !important;
}

html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #f8fafc !important;
}

html.dark .text-gray-700,
html.dark .text-slate-700 {
  color: #e2e8f0 !important;
}

html.dark .text-gray-600,
html.dark .text-slate-600 {
  color: #cbd5f5 !important;
}

html.dark .text-gray-500,
html.dark .text-slate-500 {
  color: #a5b4fc !important;
}

html.dark .text-gray-400,
html.dark .text-slate-400 {
  color: #94a3b8 !important;
}

html.dark .text-blue-700 {
  color: #bfdbfe !important;
}

html.dark .border-gray-200,
html.dark .border-slate-200 {
  border-color: rgba(148, 163, 184, 0.35) !important;
}

html.dark .border-gray-300,
html.dark .border-slate-300 {
  border-color: rgba(148, 163, 184, 0.5) !important;
}

html.dark .border-blue-200 {
  border-color: rgba(96, 165, 250, 0.45) !important;
}

html.dark .hover\:bg-blue-100:hover {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
  box-shadow: 0 25px 45px rgba(2, 6, 23, 0.45) !important;
}

html.dark #builder-progress {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.3);
}

html.dark .builder-progress-track {
  background-color: rgba(71, 85, 105, 0.55);
}

html.dark #step-nav {
  background: rgba(15, 23, 42, 0.96);
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 -22px 45px rgba(2, 6, 23, 0.6);
}

html.dark .builder-step-actions .btn-prev {
  background-color: rgba(148, 163, 184, 0.16) !important;
  color: #e2e8f0 !important;
}

html.dark .builder-step-actions .btn-prev:hover {
  background-color: rgba(148, 163, 184, 0.25) !important;
}

html.dark .preowned-card {
  background-color: rgba(15, 23, 42, 0.85);
  border-color: rgba(148, 163, 184, 0.25);
}

html.dark .preowned-card:hover {
  border-color: rgba(59, 130, 246, 0.45);
}

html.dark .preowned-card-body {
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}

html.dark .preowned-card-meta span {
  background-color: rgba(148, 163, 184, 0.18) !important;
  color: #e2e8f0 !important;
}

html.dark .preowned-card-description {
  color: #cbd5f5 !important;
}

html.dark .preowned-meta span {
  border-color: rgba(148, 163, 184, 0.2);
}

html.dark #preownedEditorContainer,
html.dark .builder-section .bg-white {
  background-color: #0f172a;
}

html.dark #preownedEditorContainer input,
html.dark #preownedEditorContainer textarea,
html.dark #preownedEditorContainer select,
html.dark .builder-section input,
html.dark .builder-section textarea,
html.dark .builder-section select {
  background-color: #0f172a;
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.4);
}

html.dark #preownedEditorContainer input::placeholder,
html.dark #preownedEditorContainer textarea::placeholder,
html.dark .builder-section input::placeholder,
html.dark .builder-section textarea::placeholder {
  color: rgba(148, 163, 184, 0.6);
}

html.dark #preownedDetail .border-dashed {
  border-color: rgba(148, 163, 184, 0.35) !important;
}

html.dark .cart-preview-panel {
  background-color: rgba(15, 23, 42, 0.85);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
}

html.dark .cart-preview-scroll {
  color: inherit;
}