/* ═══════════════════════════════════════════════
   app.css — Thin aliases pointing to ds-* classes
   All core styles live in design-system.css
   ═══════════════════════════════════════════════ */

.pg-wrap     { background: var(--ds-bg); margin: -1rem -1rem 0; padding: 1rem; min-height: calc(100vh - 4rem); }
@media(min-width:1024px) { .pg-wrap { margin: -1.5rem -1.5rem 0; padding: 1.5rem; } }

.pg-card     { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 0.75rem; }
.pg-hero     { background: linear-gradient(135deg, oklch(0.40 0.15 var(--ds-accent-h)), oklch(0.35 0.14 calc(var(--ds-accent-h) + 50))); }

.pg-skel     { animation: ds-pulse 1.5s ease-in-out infinite; border-radius: 0.375rem; background: var(--ds-border); }

/* Mobile table scroll */
.ds-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }