/* layout.css — تخطيطات الصفحات الأساسية */
#app { min-height: 100vh; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* Grid مرن */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 20px; }

/* Scrollbar مخصص */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; }

/* Utility classes */
.hidden       { display: none !important; }
.text-muted   { color: var(--color-text-muted); }
.text-center  { text-align: center; }
.mt-auto      { margin-top: auto; }
.flex-center  { display: flex; align-items: center; justify-content: center; }

/* Animations */
@keyframes slide-up   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes fade-in    { from { opacity:0; } to { opacity:1; } }
@keyframes spin       { to { transform: rotate(360deg); } }

.animate-slide-up { animation: slide-up .3s ease; }
.animate-fade-in  { animation: fade-in .25s ease; }

/* Loading spinner */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}