/* assets/css/style.css */
/* Dark gradient background with blur */
:root{
  --glass-bg: rgba(20,20,30,0.7);
  --glass-border: rgba(100,150,255,0.25);
  --accent: #3b82f6;
}

.bg-dark-gradient{
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(35,48,91,0.35), transparent),
              radial-gradient(800px 400px at 90% 20%, rgba(21,80,150,0.25), transparent),
              linear-gradient(180deg, #0b0e14 0%, #0d1117 100%);
  backdrop-filter: blur(2px);
}

.glass, .card.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(16px);
}

.glass:hover, .card.glass:hover {
  border-color: rgba(100,150,255,0.55);
  box-shadow: 0 14px 34px rgba(20,60,130,0.45);
}

.glass-nav{
  background: rgba(10,14,22,0.5);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
}

.card-title a{
  text-decoration: none;
}

.badge-soft{
  background: rgba(59,130,246,0.15);
  color: #bcd3ff;
  border: 1px solid rgba(59,130,246,0.25);
}

.btn-primary{
  background: #2563eb;
  border-color: #1d4ed8;
}

.btn-outline-primary{
  border-color: #3b82f6;
  color: #cfe0ff;
}

.btn-outline-primary:hover{
  background:#1e40af;
  color:#fff;
}

.form-control, .form-select{
  background: rgba(20,22,30,0.6);
  border:1px solid rgba(255,255,255,0.08);
  color:#dbeafe;
}

.form-control:focus{
  border-color: rgba(100,150,255,0.5);
  box-shadow: 0 0 0 0.2rem rgba(59,130,246,0.2);
}

.thumbnail-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: 10px;
}

.thumbnail-grid a, .thumbnail-grid img{
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: .75rem;
  border:1px solid rgba(255,255,255,0.12);
}

.hero{
  border-radius: 1rem;
  padding: 2rem;
}

@media (min-width: 992px){
  .hero{ padding: 3rem; }
}