/* Toasts */
/* R5: bound the stack and reserve the same space at the end of the scroll area. */
body { --toast-stack-height: min(180px, 30vh); --toast-footer-offset: 0px; }
body:has(.route-loading-status) { --toast-footer-offset: 60px; }
body:has(.toaster:not(:empty)) .content {
  padding-block-end: calc(var(--toast-stack-height) + var(--toast-footer-offset) + 40px);
  scroll-padding-block-end: calc(var(--toast-stack-height) + var(--toast-footer-offset) + 40px);
}
.toaster { position: fixed; z-index: 60; inset-inline-end: 20px; bottom: calc(20px + var(--toast-footer-offset)); display: grid; gap: 10px; max-width: min(380px, calc(100vw - 40px)); max-height: var(--toast-stack-height); overflow-y: auto; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: toast-in .22s ease-out; }
.toast p { margin: 0; flex: 1; font-size: var(--text-body); line-height: 1.45; color: var(--ink); }
.toast > svg { flex-shrink: 0; margin-top: 1px; }
.toast button { flex-shrink: 0; border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px; line-height: 0; border-radius: var(--radius-sm); }
.toast button:hover { color: var(--ink); }
.toast.success { border-left: 3px solid var(--green); }
.toast.success > svg { color: var(--green); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.error > svg { color: var(--danger); }
.toast.info { border-left: 3px solid var(--navy); }
.toast.info > svg { color: var(--navy); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* Loading skeletons (route-level loading.tsx) */
.skeleton { background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm); }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.skeleton-page { display: grid; gap: 16px; }
.skeleton-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.skeleton-kpi { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow); }
.skeleton-cards { display: grid; gap: 16px; }
.skeleton-cards.wide { grid-template-columns: minmax(0, 1fr); }
.skeleton-card { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow); }
.skeleton-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.skeleton-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; }
.skeleton-tabnav { width: 260px; height: 44px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); }