:root[data-theme='light'] body{
  background: #f5f7ff;
  color: #0f172a;
  transition: background-color .3s ease, color .3s ease;
}

:root[data-theme='light'] header[data-tt-header]{
  background:#ffffff;
  border-bottom:1px solid rgba(226,232,240,.9);
  box-shadow:0 20px 40px rgba(15,23,42,0.08);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
:root[data-theme='light'] header[data-tt-header] nav,
:root[data-theme='light'] header[data-tt-header] nav a,
:root[data-theme='light'] header[data-tt-header] [data-menu-button],
:root[data-theme='light'] header[data-tt-header] [data-theme-toggle]{
  color:#1e293b;
}
:root[data-theme='light'] header[data-tt-header] nav a:hover,
:root[data-theme='light'] header[data-tt-header] [data-menu-button]:hover{
  color:#4f46e5;
}
:root[data-theme='light'] header[data-tt-header] [data-menu-panel]{
  background:#ffffff;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 18px 36px rgba(15,23,42,0.1);
}

:root[data-theme='light'] input,
:root[data-theme='light'] textarea,
:root[data-theme='light'] select{
  background:#f8fafc;
  border-color:#d8e2f1;
  color:#0f172a;
  box-shadow:inset 0 3px 6px rgba(148,163,184,0.18);
}
:root[data-theme='light'] input::placeholder,
:root[data-theme='light'] textarea::placeholder{
  color:#94a3b8;
}

:root[data-theme='light'] .card-surface{
  background:#ffffff !important;
  border-color:#e2e8f0 !important;
  box-shadow:0 28px 48px rgba(15,23,42,0.08) !important;
}
:root[data-theme='light'] .tile-surface{
  background:#ffffff !important;
  border-color:#e7ecfa !important;
  box-shadow:0 18px 40px rgba(15,23,42,0.06) !important;
}

:root[data-theme='light'] .example-chip,
:root[data-theme='light'] .chip{
  background:#eef2ff !important;
  border-color:#dbe4ff !important;
  color:#1e293b !important;
}

:root[data-theme='light'] .prose{ color:#1f2937; }
:root[data-theme='light'] .prose p,
:root[data-theme='light'] .prose li{ color:#1f2937; }
:root[data-theme='light'] .prose h2,
:root[data-theme='light'] .prose h3{ color:#0f172a; }
:root[data-theme='light'] .prose ol>li::marker,
:root[data-theme='light'] .prose ul>li::marker{ color:#4f46e5; }

:root[data-theme='light'] footer{
  background:#f8fafc;
  border-top:1px solid rgba(226,232,240,.9);
  color:#475569;
}
:root[data-theme='light'] footer a{
  color:#1e293b;
}

:root[data-theme='light'] .text-slate-900{ color:#0f172a !important; }
:root[data-theme='light'] .text-slate-800{ color:#1e293b !important; }
:root[data-theme='light'] .text-slate-700{ color:#334155 !important; }
:root[data-theme='light'] .text-slate-600{ color:#475569 !important; }
:root[data-theme='light'] .text-slate-500{ color:#64748b !important; }

:root[data-theme='light'] body.main{background:#f4f7ff;color:#0f172a;font-family:'Inter',system-ui,sans-serif;}
:root[data-theme='light'] body.main .navbar{background:#ffffff !important;border-bottom:1px solid rgba(226,232,240,.9);box-shadow:0 16px 32px rgba(15,23,42,0.08);}
:root[data-theme='light'] body.main .navbar .navbar-nav .nav-link{color:#1f2937 !important;font-weight:600;}
:root[data-theme='light'] body.main .navbar .navbar-nav .nav-link:hover{color:#4f46e5 !important;}
:root[data-theme='light'] body.main .navbar-light .navbar-toggler{border-color:rgba(148,163,184,.4);}
:root[data-theme='light'] body.main .tool-container,
:root[data-theme='light'] body.main .tool-heading,
:root[data-theme='light'] body.main .card,
:root[data-theme='light'] body.main .followers,
:root[data-theme='light'] body.main .other,
:root[data-theme='light'] body.main .share-section,
:root[data-theme='light'] body.main .promote-button,
:root[data-theme='light'] body.main .mode-wrap{background:#ffffff !important;border:1px solid rgba(226,232,240,.8);box-shadow:0 24px 40px rgba(15,23,42,0.08) !important;border-radius:20px;}
:root[data-theme='light'] body.main .tool-heading h1,
:root[data-theme='light'] body.main h1,
:root[data-theme='light'] body.main h2,
:root[data-theme='light'] body.main h3,
:root[data-theme='light'] body.main h4{color:#0f172a;}
:root[data-theme='light'] body.main p,
:root[data-theme='light'] body.main li{color:#1f2937;}
:root[data-theme='light'] body.main input,
:root[data-theme='light'] body.main textarea,
:root[data-theme='light'] body.main select{background:#f8fafc !important;border:1px solid #d8e2f1 !important;color:#0f172a !important;box-shadow:inset 0 3px 6px rgba(148,163,184,0.18);}
:root[data-theme='light'] body.main input::placeholder,
:root[data-theme='light'] body.main textarea::placeholder{color:#94a3b8 !important;}
:root[data-theme='light'] body.main button,
:root[data-theme='light'] body.main .btn{background:#4f46e5;color:#ffffff;border-radius:12px;padding:.65rem 1.5rem;font-weight:600;border:none;}
:root[data-theme='light'] body.main button:hover,
:root[data-theme='light'] body.main .btn:hover{background:#4338ca;color:#ffffff;}
:root[data-theme='light'] body.main footer{background:#f8fafc;color:#475569;border-top:1px solid rgba(226,232,240,.9);}
:root[data-theme='light'] body.main footer a{color:#1e293b;}
:root[data-theme='light'] .mode-panel{
  background: linear-gradient(135deg, rgba(238,242,255,0.95) 0%, rgba(248,250,255,0.97) 100%);
  border:1px solid rgba(99,102,241,0.18);
  box-shadow:0 22px 44px rgba(99,102,241,0.12);
  backdrop-filter: blur(18px);
}
:root[data-theme='dark'] .mode-panel{
  background: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(30,41,59,0.82) 100%);
  border:1px solid rgba(99,102,241,0.28);
  box-shadow:0 18px 40px rgba(2,6,23,0.7);
  backdrop-filter: blur(18px);
}

.mode-icon{
  background: rgba(99,102,241,0.12);
  color:#4f46e5;
}
:root[data-theme='dark'] .mode-icon{
  background: rgba(79,70,229,0.18);
  color:#a5b4fc;
}

.mode-action{
  border:1px solid rgba(99,102,241,0.2);
  color:#4338ca;
  background: linear-gradient(135deg, rgba(236,233,254,0.9) 0%, rgba(219,234,254,0.9) 100%);
}
.mode-action:hover{
  background: linear-gradient(135deg, rgba(99,102,241,1) 0%, rgba(79,70,229,1) 100%);
  color:#ffffff;
  border-color: rgba(99,102,241,0.4);
  box-shadow:0 14px 28px rgba(79,70,229,0.25);
}
:root[data-theme='dark'] .mode-action{
  border-color: rgba(148,163,254,0.3);
  color:#c7d2fe;
  background: linear-gradient(135deg, rgba(30,41,59,0.9) 0%, rgba(46,56,87,0.9) 100%);
  box-shadow:0 10px 24px rgba(15,23,42,0.6);
}
:root[data-theme='dark'] .mode-action:hover{
  background: linear-gradient(135deg, rgba(99,102,241,0.95) 0%, rgba(79,70,229,0.95) 100%);
  color:#ffffff;
  border-color: rgba(129,140,248,0.5);
  box-shadow:0 20px 36px rgba(59,130,246,0.25);
}