.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:4px 10px 4px 4px;
  border-radius:9999px;
  border:1px solid #e2e8f0;
  background:#ffffff;
  color:#0f172a;
  font-size:14px;
  line-height:1;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.theme-toggle:hover{
  background:#f8fafc;
}
.theme-toggle-thumb{
  width:28px;
  height:28px;
  border-radius:9999px;
  background:#0f172a;
  display:inline-block;
  transition:background-color .2s ease,transform .2s ease;
}
.dark-mode .theme-toggle{
  background:#0f172a;
  border-color:#334155;
  color:#e2e8f0;
}
.dark-mode .theme-toggle:hover{
  background:#1e293b;
}
.dark-mode .theme-toggle-thumb{
  background:#f8fafc;
  transform:translateX(2px);
}
.dark-mode body{
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,153,0,.24), transparent 34rem),
    radial-gradient(circle at 88% 12%, rgba(251,146,60,.18), transparent 32rem),
    radial-gradient(circle at 50% 110%, rgba(255,122,0,.12), transparent 36rem),
    linear-gradient(180deg, #0b0b0d 0%, #090909 44%, #050505 100%)!important;
  color:#f4f4f5!important;
}
.dark-mode body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,153,0,.10), transparent 34rem),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%);
  z-index:-1;
}
.dark-mode .bg-white{
  background-color:rgba(14,14,16,.78)!important;
  color:#e5edf8!important;
}
.dark-mode header.bg-white,
.dark-mode footer.bg-white{
  background:rgba(8,8,10,.78)!important;
  border-color:rgba(148,163,184,.18)!important;
  backdrop-filter:blur(18px);
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.dark-mode main .bg-white,
.dark-mode .rounded-lg.bg-white,
.dark-mode .rounded-xl.bg-white,
.dark-mode .rounded-2xl.bg-white,
.dark-mode .shadow,
.dark-mode .shadow-sm,
.dark-mode .shadow-md,
.dark-mode .shadow-lg{
  background:linear-gradient(180deg, rgba(18,18,20,.94), rgba(10,10,12,.94))!important;
  border-color:rgba(148,163,184,.18)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.dark-mode .bg-slate-50{
  background-color:rgba(18,18,20,.82)!important;
}
.dark-mode .bg-slate-100{
  background-color:rgba(28,28,31,.78)!important;
}
.dark-mode .bg-slate-200{
  background-color:rgba(44,44,48,.86)!important;
}
.dark-mode .bg-slate-900{
  background:linear-gradient(135deg, #ffb000, #ff7a00)!important;
  color:#ffffff!important;
  border-color:rgba(255,176,0,.45)!important;
  box-shadow:0 12px 28px rgba(255,122,0,.25)!important;
}
.dark-mode .hover\:bg-slate-50:hover{
  background-color:rgba(28,28,31,.86)!important;
}
.dark-mode .hover\:bg-slate-800:hover{
  background:linear-gradient(135deg, #ff9f00, #ff6a00)!important;
  color:#ffffff!important;
}
.dark-mode .border-slate-200,
.dark-mode .border-slate-300{
  border-color:rgba(148,163,184,.2)!important;
}
.dark-mode .text-slate-900,
.dark-mode .text-slate-800{
  color:#f8fbff!important;
}
.dark-mode .text-slate-700{
  color:#d7e2f0!important;
}
.dark-mode .text-slate-600,
.dark-mode .text-slate-500{
  color:#9fb0c7!important;
}
.dark-mode .text-white{
  color:#ffffff!important;
}
.dark-mode a:not(.bg-slate-900):not(.theme-toggle){
  color:inherit;
}
.dark-mode nav a.border{
  background:rgba(18,18,20,.62)!important;
  border-color:rgba(148,163,184,.2)!important;
  color:#e5edf8!important;
}
.dark-mode nav a.border:hover,
.dark-mode footer a:hover{
  background:rgba(28,28,31,.82)!important;
  color:#ffffff!important;
}
.dark-mode input,
.dark-mode textarea,
.dark-mode select{
  background-color:rgba(10,10,12,.94)!important;
  color:#e5edf8!important;
  border-color:rgba(148,163,184,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus{
  border-color:#ff9900!important;
  --tw-ring-color:rgba(255,153,0,.25)!important;
}
.dark-mode input::placeholder,
.dark-mode textarea::placeholder{
  color:#7f90a8!important;
}
.dark-mode table,
.dark-mode tbody,
.dark-mode tr,
.dark-mode td,
.dark-mode th{
  color:#e5edf8!important;
}
.dark-mode th{
  background-color:rgba(18,18,20,.86)!important;
}
.dark-mode tr{
  border-color:rgba(148,163,184,.14)!important;
}
.dark-mode .focus\:ring-slate-200:focus{
  --tw-ring-color:rgba(255,153,0,.28)!important;
}
.dark-mode .underline,
.dark-mode a.underline{
  color:#ffb000!important;
}