:root { --primary: #2563eb; --surface: #f8fafc; --border: #e5e7eb; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: #111827; font-family: Inter, system-ui, -apple-system, sans-serif; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 256px; flex: 0 0 256px; background: #fff; border-right: 1px solid var(--border); }
.brand { height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--border); }
.brand-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--primary); }
.brand small { display: block; color: #6b7280; font-size: .75rem; }
.nav-link-app { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin-bottom: 4px; border-radius: 8px; color: #4b5563; text-decoration: none; font-size: .9rem; }
.nav-link-app:hover, .nav-link-app.active { background: #eff6ff; color: var(--primary); }
.content-shell { min-width: 0; flex: 1; }
.topbar { min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--border); }
.page-content { padding: 24px; }
.card { border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.product-card { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; animation: card-in .35s ease both; }
.product-card:hover { border-color: #93c5fd; box-shadow: 0 8px 20px rgba(37,99,235,.14); transform: translateY(-4px); }
.product-card:active { transform: translateY(-1px) scale(.98); }
.product-card:nth-child(2) { animation-delay: .04s; }
.product-card:nth-child(3) { animation-delay: .08s; }
.product-card:nth-child(4) { animation-delay: .12s; }
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.list-group-item { animation: item-in .2s ease both; }
@keyframes item-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
.badge.rounded-pill { animation: badge-pop .25s ease both; }
@keyframes badge-pop { from { transform: scale(.7); } to { transform: scale(1); } }
.btn { transition: transform .15s ease, box-shadow .15s ease; }
.btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15,23,42,.1); }
.alert { animation: alert-in .25s ease both; }
@keyframes alert-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.modal.show .modal-dialog { animation: modal-in .2s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.product-image { height: 92px; display: grid; place-items: center; border-radius: 8px; background: #eff6ff; color: var(--primary); font-size: 2rem; }
.notif-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; background: #ef4444; border-radius: 50%; }
@media (max-width: 575.98px) { .page-content { padding: 16px; } .topbar { padding: 0 16px; } }

@media print {
  .modal, .modal-backdrop { display: none !important; }
}