:root {
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-subtle: #e8f4fd;
  --success: #34c759;
  --success-bg: #e8f5e9;
  --warning: #ff9f0a;
  --warning-bg: #fff8e1;
  --error: #ff3b30;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.04);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

html {
  height: 100%;
}

body {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.7)),
    url('/images/bg-desktop.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.light {
  --bg-color: 242 242 247;
}

.light #__next, .light html,
.dark #__next, .dark html,
.light #__next > div, .dark #__next > div {
  background: transparent !important;
}

@media (max-width: 768px) {
  body {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.7)),
      url('/images/bg-home-mobile.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }
}

.light .text-theme-700 {
  color: rgb(29, 29, 31);
}

.light .text-theme-800 {
  color: rgb(134, 134, 139);
}

.light .text-theme-600 {
  color: rgb(174, 174, 178);
}

.light .text-theme-500 {
  color: var(--accent);
}

.light .border-theme-800 {
  border-color: rgb(209, 209, 214);
}

.light .border-theme-300 {
  border-color: rgb(229, 229, 234);
}

#information-widgets {
  background: rgba(29, 29, 31, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  margin: 1rem 1.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#information-widgets .text-theme-800,
#information-widgets .dark\:text-theme-200 {
  color: rgba(255, 255, 255, 0.85) !important;
}

#information-widgets .text-xs {
  color: rgba(255, 255, 255, 0.65) !important;
}

#information-widgets .bg-theme-800\/30 {
  background: rgba(255, 255, 255, 0.15) !important;
}

#information-widgets .bg-theme-800\/70 {
  background: rgba(255, 255, 255, 0.6) !important;
}

#information-widgets input {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

#information-widgets input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

#information-widgets .text-white {
  color: white !important;
}

.brand-logo {
  font-weight: 700;
  font-size: 14px;
  color: white;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

#information-widgets .flex-wrap.gap-x-2 {
  align-items: center;
}

.light .bg-theme-50 {
  background-color: rgb(255, 255, 255);
}

.light .bg-theme-60 {
  background-color: rgb(255, 255, 255);
}

.light .bg-theme-100,
.light .bg-theme-100\/20 {
  background-color: rgb(255, 255, 255);
}

.light .bg-theme-200,
.light .bg-theme-200\/50 {
  background-color: rgb(255, 255, 255);
}

div[class*="rounded-"][class*="shadow"]:not(#information-widgets):not([role="dialog"]) {
  background: white;
  border: 1px solid rgb(229, 229, 234);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

div[class*="rounded-"][class*="shadow"]:not(#information-widgets):not([role="dialog"]):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  border-color: rgb(209, 209, 214);
}

.light .shadow-md,
.light .shadow-lg {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
}

.light .text-theme-900 {
  color: rgb(29, 29, 31);
}

/* ---- Dark Theme Cards ---- */
.dark .bg-theme-50,
.dark .bg-theme-60,
.dark .bg-theme-100,
.dark .bg-theme-100\/20,
.dark .bg-theme-200,
.dark .bg-theme-200\/50,
.dark .bg-theme-800,
.dark .bg-theme-800\/30,
.dark .bg-theme-800\/50,
.dark .bg-theme-800\/70,
.dark .bg-theme-900 {
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dark div[class*="rounded-"][class*="shadow"]:not(#information-widgets):not([role="dialog"]) {
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.dark div[class*="rounded-"][class*="shadow"]:not(#information-widgets):not([role="dialog"]):hover {
  background: rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.15);
}

.dark .shadow-md,
.dark .shadow-lg {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.dark .text-theme-200,
.dark .text-theme-600,
.dark .dark\:text-theme-200 {
  color: rgba(255, 255, 255, 0.85) !important;
}

.dark .text-theme-400 {
  color: rgba(255, 255, 255, 0.55) !important;
}

.dark .text-theme-500 {
  color: rgba(255, 255, 255, 0.65) !important;
}

#footer {
  opacity: 0.5;
}