:root[data-theme='light'] .utility-shell {
  background: linear-gradient(180deg, #eff4ff 0%, #fdfdff 75%, #f5f7fb 100%);
  color: #0f172a;
}

html[data-theme='light'] body.utility-shell-page .navbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}

html[data-theme='light'] body.utility-shell-page .navbar__brand,
html[data-theme='light'] body.utility-shell-page .navbar__title,
html[data-theme='light'] body.utility-shell-page .navbar__link {
  color: #0f172a;
}

html[data-theme='light'] body.utility-shell-page .navbar__link--active,
html[data-theme='light'] body.utility-shell-page .navbar__link:hover {
  color: #1a3fbf;
}

html[data-theme='light'] body.utility-shell-page {
  --ifm-navbar-background-color: rgba(255, 255, 255, 0.92);
  --ifm-navbar-link-color: #0f172a;
  --ifm-navbar-link-hover-color: #1a3fbf;
  --ifm-navbar-link-active-color: #1a3fbf;
  --ifm-navbar-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  --ifm-navbar-border-color: rgba(15, 23, 42, 0.08);
}

:root[data-theme='light'] .utility-shell .utility-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

:root[data-theme='light'] .utility-shell .utility-logo {
  color: #1a3fbf;
}

:root[data-theme='light'] .utility-shell .utility-subtitle {
  color: #4c5773;
}

:root[data-theme='light'] .utility-shell .button {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

:root[data-theme='light'] .utility-shell .button.primary {
  background: #215cff;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 16px 30px rgba(33, 92, 255, 0.35);
}

:root[data-theme='light'] .utility-shell .button.ghost {
  background: transparent;
}

:root[data-theme='light'] .utility-shell .utility-stage {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  box-shadow: 0 45px 80px rgba(15, 23, 42, 0.18);
}

:root[data-theme='light'] .utility-shell .utility-stage::after {
  background: radial-gradient(circle at 15% 15%, rgba(33, 92, 255, 0.08), transparent 60%);
}

:root[data-theme='light'] .utility-shell .utility-fullscreen-exit-button {
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.2);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
}

:root[data-theme='light'] .utility-shell .utility-fullscreen-indicator {
  background: rgba(15, 23, 42, 0.2);
}

:root[data-theme='light'] .utility-shell .utility-info {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

:root[data-theme='light'] .utility-shell .utility-card p,
:root[data-theme='light'] .utility-shell .utility-info p,
:root[data-theme='light'] .utility-shell .utility-note {
  color: #4b4f65;
}

:root[data-theme='light'] .utility-shell .utility-tag {
  border-color: rgba(15, 23, 42, 0.18);
  color: #1f2c4d;
  background: rgba(239, 243, 255, 0.8);
}

:root[data-theme='light'] .utility-shell .utility-toggle {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.15);
  color: #0f172a;
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.18);
}

:root[data-theme='light'] .utility-shell .utility-toggle:hover {
  background: #f4f6ff;
}

:root[data-theme='light'] .utility-shell .utility-fullscreen {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.15);
  color: #0f172a;
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.18);
}

:root[data-theme='light'] .utility-shell .utility-fullscreen:hover {
  background: #f4f6ff;
}