/* Glass panel */
.glass-panel {
  background: rgba(22, 27, 38, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Grid background décoratif */
.grid-bg {
  background-size: 40px 40px;
  background-image: linear-gradient(to right, #1e293b 1px, transparent 1px),
                    linear-gradient(to bottom, #1e293b 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* Dot grid pattern (login/landing) */
.dot-pattern {
  background-image: radial-gradient(#2a3441 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Orbes de dégradé flou */
.orb { 
  background: rgba(80,144,247,0.15); 
  filter: blur(120px); 
  border-radius: 50%; 
  pointer-events: none;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0F1117; }
::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #5090f7; }

/* Code editor syntax highlighting */
.code-keyword { color: #5090f7; font-weight: bold; }
.code-value { color: #2dd4bf; }
.code-string { color: #a8ff78; }
.code-comment { color: #6b7280; font-style: italic; }
.line-number { 
    display: inline-block; 
    width: 30px; 
    text-align: right; 
    margin-right: 10px; 
    color: #4b5563; 
    user-select: none; 
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #5090f7 0%, #7C5CFC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Card accent line */
.card-accent {
    position: relative;
    overflow: hidden;
}
.card-accent::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(to right, transparent, #5090f7, transparent);
  opacity: 0.5;
}

/* Toasts */
.toast {
    @apply flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg text-white text-sm font-medium transition-all duration-300 transform translate-x-0 opacity-100;
    backdrop-filter: blur(8px);
    width: 320px;
    animation: slideIn 0.3s ease-out forwards;
}
.toast-success { @apply bg-green-900/80 border border-green-500/30; }
.toast-error { @apply bg-red-900/80 border border-red-500/30; }
.toast-warning { @apply bg-yellow-900/80 border border-yellow-500/30; }
.toast-info { @apply bg-blue-900/80 border border-blue-500/30; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateY(-10px); }
}

.toast.hiding {
    animation: fadeOut 0.3s ease-in forwards;
}