/* ==== Photobooth Sandra — thème dark éditorial ==== */

[x-cloak] { display: none !important; }

/* Fond animé subtil : orbes de couleur floutées + grain */
.app-bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(50rem 30rem at 15% -10%, rgba(217, 70, 239, 0.28), transparent 60%),
    radial-gradient(40rem 30rem at 90% 0%, rgba(244, 114, 182, 0.18), transparent 55%),
    radial-gradient(60rem 40rem at 50% 120%, rgba(251, 146, 60, 0.15), transparent 60%),
    #0b0b12;
}
.app-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* Glass card réutilisable */
.glass { background: rgba(255,255,255,0.04); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); }
.glass-strong { background: rgba(20,20,32,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); }
.glass-hover:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }

/* Texte dégradé accent */
.text-gradient { background: linear-gradient(120deg,#fb7185 0%,#e879f9 50%,#fbbf24 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Boutons */
.btn-primary { background: linear-gradient(120deg,#f43f5e,#d946ef); color:white; box-shadow: 0 8px 32px -8px rgba(217,70,239,0.6); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(.4); }
.btn-ghost { background: rgba(255,255,255,0.04); color: #e4e4e7; border: 1px solid rgba(255,255,255,0.1); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); }

/* Chip / pill */
.chip { display:inline-flex; align-items:center; gap:.35rem; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); padding:.25rem .7rem; border-radius:999px; font-size:.75rem; color:#d4d4d8; }
.chip-active { background:linear-gradient(120deg,rgba(244,63,94,.9),rgba(217,70,239,.9)); border-color: transparent; color:white; box-shadow: 0 6px 20px -8px rgba(217,70,239,.6); }

/* Inputs sombres */
input, textarea, select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #f4f4f5 !important;
}
input::placeholder, textarea::placeholder { color: rgba(228,228,231,.4) !important; }
input:focus, textarea:focus, select:focus {
  border-color: rgba(244,63,94,.6) !important;
  box-shadow: 0 0 0 3px rgba(244,63,94,.15) !important;
  outline: none;
}
select option { background: #12121b; color:#f4f4f5; }

/* Scrollbars discrètes */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

kbd { background:#1a1a26;color:#e4e4e7;border:1px solid #3a3a4f; border-radius:.25rem;padding:0 .35rem;font-size:.7rem; font-family: "JetBrains Mono", monospace; }

/* Toast */
@keyframes toast-in { from { transform: translateY(20px) scale(.95); opacity:0; } to { transform: translateY(0) scale(1); opacity:1; } }
.toast { animation: toast-in .3s cubic-bezier(.2,.9,.3,1.3); }

/* Divider ambré */
.divider { height:1px; background: linear-gradient(90deg,transparent,rgba(251,146,60,.4),transparent); }

/* Titre éditorial */
.title-serif { font-family: "Instrument Serif", ui-serif, serif; letter-spacing: -.02em; }
.title-serif em { font-style: italic; }