:root{
  --sidebar-bg:#F9FAFB; --sidebar-text:#4B5563; --sidebar-text-hover:#111827;
  --sidebar-active-bg:#E5E7EB; --sidebar-active-text:#1F2937;
  --main-bg:#F3F4F6; --header-bg:#FFFFFF; --card-bg:#FFFFFF;
  --text-primary:#1F2937; --text-secondary:#6B7280; --border-color:#E5E7EB;
}
html.dark{
  --sidebar-bg:#111827; --sidebar-text:#9CA3AF; --sidebar-text-hover:#F9FAFB;
  --sidebar-active-bg:#374151; --sidebar-active-text:#F9FAFB;
  --main-bg:#1F2937; --header-bg:#111827; --card-bg:#374151;
  --text-primary:#F9FAFB; --text-secondary:#D1D5DB; --border-color:#4B5563;
}
body{font-family:'Inter',sans-serif;background-color:var(--main-bg);color:var(--text-primary);transition:background-color .3s,color .3s}
.sidebar,.main-content{transition:all .3s ease-in-out}
.sidebar-nav::-webkit-scrollbar{display:none}.sidebar-nav{-ms-overflow-style:none;scrollbar-width:none}
.submenu-arrow{transition:transform .3s}.submenu-open .submenu-arrow{transform:rotate(90deg)}
@media(max-width:768px){.sidebar{transform:translateX(-100%)} body.sidebar-open .sidebar{transform:translateX(0)}}
@media(min-width:768px){
  body.sidebar-collapsed .sidebar{width:5rem}
  body.sidebar-collapsed .main-content{margin-left:5rem}
  body.sidebar-collapsed .sidebar .sidebar-text-label,
  body.sidebar-collapsed .sidebar .submenu-arrow,
  body.sidebar-collapsed .sidebar .brand-signature{display:none}
  body.sidebar-collapsed .sidebar .submenu-trigger, body.sidebar-collapsed .sidebar nav>a{justify-content:center}
  body.sidebar-collapsed .sidebar .submenu{display:none!important}
}