/* Critical styles: applied before first paint (blocks the initial green theme flash) */
html {
  background: linear-gradient(135deg, #d5e5f6 0%, #dce6f1 30%, #e8eff7 55%, #f1f5f9 78%, #ffffff 100%) !important;
  background-attachment: fixed !important;
  background-color: #e7eff8 !important;
}
html.dark {
  background: linear-gradient(160deg, #0b1220 0%, #0e1726 55%, #0b1421 100%) !important;
  background-color: #0b1220 !important;
}
html body {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  color: #090b10;
}
html body .bg-mesh-gradient,
html body [class*="mesh-gradient"],
html body [class*="mesh-bg"] {
  display: none !important;
  background-image: none !important;
  opacity: 0 !important;
}
html body #app,
html body .min-h-screen,
html body .min-h-screen.bg-gray-50 {
  background: transparent !important;
  background-image: none !important;
}
/* header / sidebar chrome */
html body header {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
}
html body aside.sidebar {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-right: 1px solid rgba(15, 23, 42, 0.07) !important;
}
/* cards + controls (reference palette) */
html body .card {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #f3f4f6 !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12) !important;
}
html body .card div[class*="rounded-2xl"] { border-radius: 16px !important; }
html body .btn { border-radius: 9999px !important; }
html body .btn-primary {
  background-color: #0071e3 !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 28px rgba(0, 113, 227, 0.28) !important;
}
html body .btn-secondary,
html body .btn-ghost {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: rgb(17, 20, 26) !important;
}
html body input,
html body .input {
  background-color: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
/* dark mode chrome */
html.dark body header { background-color: rgba(19, 28, 44, 0.92) !important; }
html.dark body aside.sidebar { background-color: rgba(19, 28, 44, 0.94) !important; }
html.dark body .card {
  background-color: rgba(19, 28, 44, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}