:root {
  --app-bg: #f6f8fc;
  --app-surface: #ffffff;
  --app-surface-2: #eef2ff;
  --app-text: #111827;
  --app-text-muted: #4b5563;
  --app-border: #dbe3f0;
  --app-primary: #3b82f6;
  --app-primary-strong: #2563eb;
  --app-success: #059669;
  --app-warning: #d97706;
  --app-danger: #dc2626;
  --app-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  --app-btn-glow: 0 8px 18px rgba(37, 99, 235, 0.25);
  --app-btn-glow-hover: 0 12px 24px rgba(37, 99, 235, 0.34);
}

:root[data-theme="dark"] {
  --app-bg: #0b1220;
  --app-surface: #0f172a;
  --app-surface-2: #111b31;
  --app-text: #e5ecff;
  --app-text-muted: #9fb0d1;
  --app-border: #1f2b45;
  --app-primary: #60a5fa;
  --app-primary-strong: #3b82f6;
  --app-success: #34d399;
  --app-warning: #fbbf24;
  --app-danger: #f87171;
  --app-shadow: 0 14px 34px rgba(2, 6, 23, 0.45);
  --app-btn-glow: 0 10px 22px rgba(59, 130, 246, 0.34);
  --app-btn-glow-hover: 0 14px 30px rgba(56, 189, 248, 0.38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-bg: #0b1220;
    --app-surface: #0f172a;
    --app-surface-2: #111b31;
    --app-text: #e5ecff;
    --app-text-muted: #9fb0d1;
    --app-border: #1f2b45;
    --app-primary: #60a5fa;
    --app-primary-strong: #3b82f6;
    --app-success: #34d399;
    --app-warning: #fbbf24;
    --app-danger: #f87171;
    --app-shadow: 0 14px 34px rgba(2, 6, 23, 0.45);
  }
}

html, body {
  background: var(--app-bg) !important;
  color: var(--app-text) !important;
}

body.has-space-bg {
  position: relative;
  min-height: 100vh;
  background: transparent !important;
}

#global-space-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: radial-gradient(circle at 20% 10%, rgba(38, 57, 104, 0.35) 0%, rgba(2, 6, 23, 0) 42%),
              radial-gradient(circle at 78% 80%, rgba(56, 189, 248, 0.18) 0%, rgba(2, 6, 23, 0) 35%),
              #020617;
}

body.has-space-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.48) 0%, rgba(2, 6, 23, 0.62) 100%);
}

body.has-space-bg > :not(#global-space-bg) {
  position: relative;
  z-index: 1;
}

body,
main,
section,
article,
aside,
header,
footer,
nav,
.container,
.card,
.auth-card,
.modal-content,
.checkout-container,
.profile-container,
.chat-container,
.product-card,
.bundle-card,
.order-card,
.form-container,
.content,
.content-wrap,
.page,
.page-content {
  color: var(--app-text);
}

.card,
.auth-card,
.modal-content,
.checkout-container,
.profile-container,
.product-card,
.bundle-card,
.order-card,
.form-container,
.user-card,
.admin-card,
.feature-card,
.panel,
.widget,
.table-container,
[class*="window"],
[class*="Window"],
[class*="card"],
[class*="Card"] {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  box-shadow: var(--app-shadow);
}

body.has-space-bg .card,
body.has-space-bg .auth-card,
body.has-space-bg .modal-content,
body.has-space-bg .checkout-container,
body.has-space-bg .profile-container,
body.has-space-bg .product-card,
body.has-space-bg .bundle-card,
body.has-space-bg .order-card,
body.has-space-bg .form-container,
body.has-space-bg .user-card,
body.has-space-bg .feature-card,
body.has-space-bg .panel,
body.has-space-bg .widget,
body.has-space-bg .table-container,
body.has-space-bg [class*="window"],
body.has-space-bg [class*="Window"],
body.has-space-bg [class*="card"],
body.has-space-bg [class*="Card"] {
  background: rgba(9, 16, 36, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--app-text-muted) !important;
}

a {
  color: var(--app-primary);
}

a:hover {
  color: var(--app-primary-strong);
}

button,
.btn,
.auth-btn,
.signin-btn,
.register-btn,
.checkout-btn,
.submit-btn {
  border-color: transparent;
}

.btn-primary,
.auth-btn.btn-primary,
.signin-btn,
.register-btn,
.checkout-btn,
.submit-btn {
  background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong)) !important;
  color: #ffffff !important;
  box-shadow: var(--app-btn-glow);
}

.btn-primary:hover,
.auth-btn.btn-primary:hover,
.signin-btn:hover,
.register-btn:hover,
.checkout-btn:hover,
.submit-btn:hover {
  box-shadow: var(--app-btn-glow-hover);
}

.btn-secondary,
.auth-btn.btn-secondary,
button.secondary {
  background: var(--app-surface-2) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
  box-shadow: none !important;
}

#themeToggle .old-theme-toggle-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#themeToggle .old-theme-icon {
  opacity: 0;
  display: none;
  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

#themeToggle.is-dark .old-theme-icon-moon {
  display: inline-block;
  opacity: 1;
  transform: scale(1.06);
  color: #cbd5e1;
}

#themeToggle.is-light .old-theme-icon-sun {
  display: inline-block;
  opacity: 1;
  transform: scale(1.06);
  color: #fbbf24;
}

#themeToggle:hover .old-theme-icon-moon {
  filter: drop-shadow(0 0 8px rgba(191, 219, 254, 0.75));
}

#themeToggle:hover .old-theme-icon-sun {
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.9));
}

table,
th,
td {
  border-color: var(--app-border) !important;
}

th,
thead {
  background: var(--app-surface-2) !important;
  color: var(--app-text) !important;
}

td,
tr {
  background: transparent;
  color: var(--app-text);
}

.alert,
.notice,
.message {
  border-color: var(--app-border) !important;
}

.alert.success {
  color: var(--app-success) !important;
}

.alert.error,
.alert.danger {
  color: var(--app-danger) !important;
}

.alert.warning {
  color: var(--app-warning) !important;
}

.muted,
small,
.text-muted,
.subtitle,
.description,
p {
  color: var(--app-text-muted);
}

/* Global polish for user-facing auth and form pages */
.signin-container,
.container,
.form-card,
.header-card,
.signin-body,
.signin-header,
.user-profile-container,
.checkout-wrapper,
.cart-wrapper,
.chat-wrapper,
.report-wrapper {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  box-shadow: var(--app-shadow) !important;
  color: var(--app-text) !important;
}

body.has-space-bg .signin-container,
body.has-space-bg .container,
body.has-space-bg .form-card,
body.has-space-bg .header-card,
body.has-space-bg .signin-body,
body.has-space-bg .signin-header,
body.has-space-bg .user-profile-container,
body.has-space-bg .checkout-wrapper,
body.has-space-bg .cart-wrapper,
body.has-space-bg .chat-wrapper,
body.has-space-bg .report-wrapper {
  background: rgba(10, 18, 39, 0.74) !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.back-link,
.back-btn,
.forgot-link {
  color: var(--app-primary) !important;
}

.back-link:hover,
.back-btn:hover,
.forgot-link:hover {
  color: var(--app-primary-strong) !important;
}

.user-type-selector {
  gap: 10px;
}

.type-btn {
  background: var(--app-surface-2) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
  box-shadow: none !important;
}

.type-btn.active {
  background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: var(--app-btn-glow) !important;
}

.type-btn:hover {
  border-color: var(--app-primary) !important;
}

.modal-overlay,
#forgotPasswordModal,
#recoveryChatModal,
#contact-modal {
  background: rgba(2, 6, 23, 0.72) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.modal-content,
#forgotPasswordModal .modal-content,
#recoveryChatModal > div,
#contact-modal > div {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
  box-shadow: var(--app-shadow) !important;
}

:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] #forgotPasswordModal .modal-content,
:root[data-theme="dark"] #recoveryChatModal > div,
:root[data-theme="dark"] #contact-modal > div {
  background: #0f172a !important;
}

.modal-header {
  background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong)) !important;
  color: #ffffff !important;
}

.alert.info,
.alert.success,
.alert.warning,
.alert.error,
.notice,
.message {
  background: var(--app-surface-2) !important;
}