:root {
  --primary-color: #7028b8;
  --secondary-color: #1d1b23;
  --background-color: #5ab9c1;
  --text-color: #212529;
  --card-background: #ff1f1f;
  --card-border: #d11a51;
  --card-radius: 16px;
  --card-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --card-hover-transform: rotate(2deg);
  --font-family: 'Almarai', sans-serif;
  --animation-speed: 0.1s;
  --grid-columns: 4;
  --header-color: #1d867a;
}
body, .admin-layout, .navbar, .card, .btn, .form-control, .form-select, .table, .alert { font-family: 'Almarai', sans-serif !important; }
body { background-color: #5ab9c1; color: #212529; }
.admin-sidebar, .admin-content { font-family: 'Almarai', sans-serif !important; }
h1, h2, h3, h4, h5, h6 { font-family: 'Almarai', sans-serif !important; }
input, textarea, select, button { font-family: 'Almarai', sans-serif !important; }
.channel-card { 
  background-color: #ff1f1f !important; 
  border-radius: 16px !important; 
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; 
  transition: all 0.1s ease !important; 
  overflow: hidden !important; 
  border: 1px solid #d11a51 !important; 
}
.channel-card:hover { 
  transform: rotate(2deg) !important; 
}
.btn-primary, .btn-watch { 
  background: #7028b8 !important; 
  border-color: #7028b8 !important; 
  color: white !important; 
  transition: all 0.1s ease !important; 
}
.btn-primary:hover, .btn-watch:hover { 
  background: #5c14a4 !important; 
  border-color: #5c14a4 !important; 
}
.bg-gradient-warning, .badge.bg-warning { 
  background: linear-gradient(135deg, #ffc107, #ff8f00) !important; 
  color: #000 !important; 
}
.bg-gradient-success, .badge.bg-success { 
  background: linear-gradient(135deg, #28a745, #20c997) !important; 
  color: white !important; 
}
.navbar { background-color: #1d867a !important; }
.card { 
  background-color: #ff1f1f !important; 
  border: 1px solid #d11a51 !important; 
  border-radius: 16px !important; 
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; 
  transition: all 0.1s ease !important; 
}
.card:hover { 
  transform: rotate(2deg) !important; 
}
.card-img-top { 
  border-radius: 16px 16px 0 0 !important; 
}
@media (min-width: 576px) { .col-sm-6 { flex: 0 0 25% !important; max-width: 25% !important; } }
@media (min-width: 768px) { .col-md-4 { flex: 0 0 25% !important; max-width: 25% !important; } }
@media (min-width: 992px) { .col-lg-3 { flex: 0 0 25% !important; max-width: 25% !important; } }
.card-img-wrapper { 
  border-radius: 16px 16px 0 0 !important; 
  overflow: hidden !important; 
  height: 200px !important; 
}
.channel-img, .channel-placeholder { 
  height: 200px !important; 
  width: 100% !important; 
  object-fit: cover !important; 
}
.channel-placeholder { 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; 
}