/* During theme transition, make all backgrounds transparent for smooth gradient effect */
.theme-transitioning,
.theme-transitioning body,
.theme-transitioning header,
.theme-transitioning main,
.theme-transitioning section,
.theme-transitioning .card,
.theme-transitioning .bg-card,
.theme-transitioning .bg-white,
.theme-transitioning .bg-slate-100,
.theme-transitioning .bg-white\/90,
.theme-transitioning .bg-white\/80 {
  background: transparent !important;
  box-shadow: none !important;
  transition: background 1s, color 1s;
}
.header-brand {
  color: #111 !important;
  transition: color 1s;
}
.dark .header-brand {
  color: #fff !important;
  transition: color 1s;
}
.theme-toggle-container {
  position: relative;
  width: 80px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1rem;
}
#background {
  width: 80px;
  height: 38px;
  position: absolute;
  background: #d3edf8;
  border-radius: 19px;
  z-index: 0;
  transition: background 0.5s;
}
#day, #night {
  width: 80px;
  height: 38px;
  background: #9cd6ef;
  position: absolute;
  z-index: 1;
  cursor: pointer;
  border-radius: 19px;
  border: 3px solid #65c0e7;
  transition: background 0.5s, border-color 0.5s;
}
#night {
  pointer-events: none;
}
.theme-toggle-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 38px;
  pointer-events: none;
  z-index: 2;
}
:root {
  --color-brand: 56 189 248;
  --bg-main: #fff;
  --text-main: #222;
  --bg-header: #fff;
  --bg-card: #fff;
  --border-main: #e2e8f0;
}
.text-slate-600, .text-slate-500, .text-slate-400, .text-slate-300, .text-slate-700 {
  color: var(--text-main) !important;
}
.dark .text-slate-600, .dark .text-slate-500, .dark .text-slate-400, .dark .text-slate-300, .dark .text-slate-700 {
  color: rgb(241 245 249) !important;
}
.bg-white, .bg-slate-100, .bg-white\/90, .bg-white\/80 {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
}
.dark .bg-white, .dark .bg-slate-100, .dark .bg-white\/90, .dark .bg-white\/80 {
  background-color: rgb(15 23 42) !important;
  color: rgb(241 245 249) !important;
}
body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(to bottom, #f8fafc 0%, #e0e7ef 100%) !important;
  color: var(--text-main) !important;
  transition: background-color 1s, color 1s;
}
header {
  background-color: var(--bg-header) !important;
  transition: background-color 1s, color 1s;
}
main, section, .card, .bg-card {
  background-color: rgba(255,255,255,0.85) !important;
  color: var(--text-main) !important;
  border-color: var(--border-main);
  transition: background-color 1s, color 1s;
}
.dark body {
  background: linear-gradient(to bottom, #1a2332 0%, #22304a 100%) !important;
  color: rgb(241 245 249) !important;
}
.dark header {
  background-color: #1a2332 !important;
}
.dark main, .dark section, .dark .card, .dark .bg-card {
  background-color: rgba(26,35,50,0.85) !important;
  color: rgb(241 245 249) !important;
  border-color: rgb(51 65 85);
}
.dark .bg-white, .dark .bg-slate-100, .dark .bg-white\/90, .dark .bg-white\/80 {
  background-color: #1a2332 !important;
  color: rgb(241 245 249) !important;
}
#triangle-loader path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: draw-triangle 1.2s cubic-bezier(.77,0,.18,1) forwards;
}
@keyframes draw-triangle {
  to {
    stroke-dashoffset: 0;
  }
}