*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: #f9f9fb; -webkit-font-smoothing: antialiased; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Skeleton loading */
.skeleton { background: linear-gradient(90deg, #f3f3f5 25%, #e8e8ea 50%, #f3f3f5 75%); background-size: 200% 100%; animation: shimmer 1.8s infinite; border-radius: 0.5rem; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Spinner */
.spinner { width: 20px; height: 20px; border: 2px solid #e8e8ea; border-top-color: #166d13; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-center { display: flex; justify-content: center; align-items: center; padding: 36px; }

/* Toast */
#toast { position: fixed; bottom: 24px; right: 24px; background: #fff; border-radius: 12px; padding: 13px 20px; font-size: 0.8125rem; font-weight: 500; box-shadow: 0 20px 40px -5px rgba(26,28,29,0.15); z-index: 9999; transform: translateY(20px); opacity: 0; transition: all 0.24s cubic-bezier(0.34,1.56,0.64,1); max-width: 320px; font-family: 'Inter', sans-serif; }
#toast.show { transform: translateY(0); opacity: 1; }
#toast.success { border-left: 3px solid #166d13; }
#toast.error { border-left: 3px solid #99443a; }

/* Sidebar mobile */
@media (max-width: 1024px) {
  #sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
  #sidebar.open { transform: translateX(0); box-shadow: 4px 0 40px rgba(0,0,0,0.15); }
  #sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 40; }
  #sidebar-overlay.show { display: block; }
  .main-wrap { margin-left: 0 !important; }
  header.fixed.left-64 { left: 0 !important; max-width: 100% !important; }
}