:root {
  --color-primary: #111827;
  --color-secondary: #374151;
  --color-accent: #3B82F6;
  --color-background: #FFFFFF;
}

.glass {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-accent {
  background: var(--color-accent);
  color: #fff;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 10px 25px rgba(59,130,246,.25); }
.btn-accent:active { transform: translateY(0); opacity: .9; }
.btn-accent:disabled { opacity: .6; cursor: not-allowed; }

.card-soft {
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.95));
  box-shadow: 0 10px 30px rgba(17,24,39,.08);
  border-radius: 16px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card-soft:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(17,24,39,.12); }

.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.03), rgba(0,0,0,0.06));
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s infinite;
  border-radius: 10px;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.spinner {
  width: 22px; height: 22px; border: 3px solid rgba(0,0,0,0.1); border-top-color: var(--color-accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.dark-mode {
  background: #0b0e14;
  color: #e5e7eb;
}
.dark-mode .navbar,
.dark-mode .card-soft { background: rgba(16, 20, 26, 0.85); }
.dark-mode .btn-accent { box-shadow: 0 10px 25px rgba(59,130,246,.35); }