/* Notifications Discord, page profil et fenêtre « Poster un leak ».
   Style volontairement sobre : surfaces plates, bordures fines, une seule couleur d'accent.
   Chargé après wk-site.css (lien séparé dans index.html). Les composants ont surtout des styles en
   ligne : on les cible par leur structure et on passe par !important. */

/* =================== Fenêtre « Notifications Discord » =================== */
html body #wkDiscordNotifModal .wk-notif-modal-backdrop {
  background: rgba(0, 0, 0, .75) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
html body #wkDiscordNotifModal .wk-notif-modal-card {
  width: min(400px, 100%) !important;
  padding: 22px !important;
  background: #121318 !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
/* wk-site.css encadre tous les enfants directs des « modal » : on annule pour ces blocs */
html body #wkDiscordNotifModal .wk-notif-modal-card > .wk-auth-title,
html body #wkDiscordNotifModal .wk-notif-modal-card > .wk-auth-subtitle,
html body #wkDiscordNotifModal .wk-notif-modal-card > .wk-notif-perks {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body #wkDiscordNotifModal .wk-auth-logo { display: none !important; }
html body #wkDiscordNotifModal .wk-auth-title {
  padding-right: 40px;
  color: #f2f3f5 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-align: left !important;
}
html body #wkDiscordNotifModal .wk-auth-subtitle {
  margin: 4px 0 18px !important;
  color: #80848e !important;
  font-size: 13px !important;
  text-align: left !important;
}
html body #wkDiscordNotifModal .wk-auth-close {
  top: 16px !important;
  right: 16px !important;
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #80848e !important;
}
html body #wkDiscordNotifModal .wk-auth-close:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }

/* Carte du compte */
html body #wkDiscordNotifModal .wk-notif-status-card {
  margin-bottom: 16px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 10px !important;
  background: #17181e !important;
  box-shadow: none !important;
  text-align: left;
}
html body #wkDiscordNotifModal .wk-notif-status-card div[style*="44px"] {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: #5865f2 !important;
  color: #fff !important;
  font-size: 17px !important;
}
html body #wkDiscordNotifModal #wkNotifDiscordUsername { font-size: 14px !important; font-weight: 700 !important; }
html body #wkDiscordNotifModal #wkNotifRoleStatus { margin-top: 1px; font-size: 12px !important; }
html body #wkDiscordNotifModal #wkNotifRoleStatus span { color: #80848e !important; font-weight: 500 !important; }

/* Ce que l'option apporte */
html body #wkDiscordNotifModal .wk-notif-perks {
  display: grid;
  gap: 9px;
  margin: 0 0 20px !important;
  padding: 0 !important;
  list-style: none;
}
html body #wkDiscordNotifModal .wk-notif-perks li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #b5bac1;
  font-size: 13px;
  line-height: 1.45;
}
html body #wkDiscordNotifModal .wk-notif-perk-ic { flex-shrink: 0; width: 14px; color: #80848e; font-size: 12px; text-align: center; }
html body #wkDiscordNotifModal #wkNotifModalFeedback {
  margin-bottom: 16px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 8px !important;
  background: #17181e !important;
  box-shadow: none !important;
  color: #dbdee1 !important;
  font-weight: 600 !important;
  text-align: left !important;
}

/* Bouton « Terminer » */
html body #wkDiscordNotifModal .wk-notif-modal-card > button[type="button"] {
  height: 40px;
  border: 0 !important;
  border-radius: 8px !important;
  background: #5865f2 !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  transition: background-color .15s !important;
}
html body #wkDiscordNotifModal .wk-notif-modal-card > button[type="button"]:hover { background: #4752c4 !important; }
html body #wkDiscordNotifModal .wk-notif-modal-card > button[type="button"] i { display: none; }

/* =================== Page profil =================== */
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) > .relative.p-6.rounded-2xl {
  padding: 24px !important;
  background: #121318 !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) > .relative.p-6.rounded-2xl > .absolute.inset-0 { display: none !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) > .relative.p-6.rounded-2xl > .relative.flex.items-start { gap: 18px !important; align-items: center !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .relative.flex-shrink-0 > .rounded-2xl { box-shadow: none !important; border-radius: 16px !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .relative.flex-shrink-0 img.w-20 {
  width: 84px !important;
  height: 84px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 16px !important;
}
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) h1 { font-size: 22px !important; font-weight: 800 !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .flex-1.min-w-0 > div:first-child { margin-bottom: 12px !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .flex-1.min-w-0 > div:first-child > div:last-child { color: #6d717b !important; font-size: 11px !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .mt-1\.5 { margin-top: 8px !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .mt-1\.5 > * { box-shadow: none !important; border-radius: 6px !important; }
/* Badge Premium : neutre, sans dégradé doré ni halo */
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) h1 ~ .relative.inline-flex.rounded-lg {
  padding: 3px 8px !important;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px !important;
  background: #1b1d24 !important;
  box-shadow: none !important;
  color: #e3e5e8 !important;
  font-size: 10.5px !important;
  letter-spacing: .04em;
}
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) h1 ~ .relative.inline-flex.rounded-lg > div:first-child { transform: none !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) h1 ~ .relative.inline-flex.rounded-lg svg { fill: none !important; color: #a5b4fc !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) h1 ~ .relative.inline-flex.rounded-lg > .absolute { display: none !important; }
/* Barre d'XP */
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .mb-1\.5 > .h-2 { height: 4px !important; background: rgba(255, 255, 255, .07) !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .mb-1\.5 > .h-2 > div { background: #3b82f6 !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .flex-1.min-w-0 > p { margin-top: 6px; color: #6d717b !important; font-size: 11px !important; }

/* Statistiques */
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .grid.grid-cols-3 { gap: 10px !important; margin-top: 22px !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .grid.grid-cols-3 > div {
  padding: 14px 16px !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 10px !important;
  background: #17181e !important;
}
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .grid.grid-cols-3 > div > .absolute { display: none; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .grid.grid-cols-3 > div > .flex { margin-bottom: 8px !important; color: #80848e !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .grid.grid-cols-3 > div > .flex span { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .08em !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .grid.grid-cols-3 > div > p { font-size: 24px !important; font-weight: 800 !important; }

/* Liste des posts */
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) > div:last-child > p:first-child { margin-top: 8px; color: #80848e !important; font-size: 10.5px !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) > div:last-child > .text-center.py-12 {
  padding: 36px 20px !important;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  background: #121318;
}
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) > div:last-child > .text-center.py-12 > svg { color: #4e525c !important; }
html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) > div:last-child > .text-center.py-12 > p { color: #6d717b !important; font-size: 13px !important; }

@media (max-width: 640px) {
  html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) > .relative.p-6.rounded-2xl { padding: 16px !important; }
  html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .relative.flex-shrink-0 img.w-20 { width: 64px !important; height: 64px !important; }
  html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) h1 { font-size: 19px !important; }
  html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .grid.grid-cols-3 { gap: 8px !important; }
  html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .grid.grid-cols-3 > div { padding: 12px !important; }
  html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .grid.grid-cols-3 > div > p { font-size: 20px !important; }
  /* Libellés : « Téléchargements » ne tient pas à côté de l'icône sur un téléphone */
  html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .grid.grid-cols-3 > div { padding: 10px 6px !important; }
  html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .grid.grid-cols-3 > div > .flex svg { display: none; }
  html body #root main:has(> .relative.p-6.rounded-2xl .grid.grid-cols-3) .grid.grid-cols-3 > div > .flex span { font-size: 8.5px !important; letter-spacing: 0 !important; white-space: nowrap; }
}

/* =================== Fenêtre « Poster un leak » =================== */
html body #root .fixed.inset-0.z-50:has(> .max-w-xl .w-7.h-7.rounded-full) > .absolute.inset-0 { background: rgba(0, 0, 0, .78) !important; backdrop-filter: blur(4px) !important; }
html body #root .fixed.inset-0.z-50 > .max-w-xl:has(.w-7.h-7.rounded-full) {
  background: #121318 !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important;
}
/* En-tête */
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) > .flex.flex-col > .p-5:first-child { padding: 18px 20px !important; border-bottom-color: rgba(255, 255, 255, .07) !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) h2 { font-size: 16px !important; font-weight: 700 !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) h2 + p { margin-top: 2px !important; color: #80848e !important; font-size: 12px !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) > .flex.flex-col > .p-5:first-child > button { border-radius: 6px !important; background: transparent !important; color: #80848e !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) > .flex.flex-col > .p-5:first-child > button:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }

/* Étapes */
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) > .flex.flex-col > .px-5.py-4 { padding: 14px 20px !important; border-bottom-color: rgba(255, 255, 255, .07) !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .w-7.h-7.rounded-full { width: 22px !important; height: 22px !important; border-width: 1px !important; font-size: 10.5px !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .w-7.h-7.rounded-full[style*="68, 134, 239"] { background: #3b82f6 !important; border-color: #3b82f6 !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .w-7.h-7.rounded-full[style*="68, 134, 239"] span { color: #fff !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .px-5.py-4 span.text-\[11px\] { font-size: 12px !important; font-weight: 600 !important; }

/* Champs */
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) > .flex.flex-col > .flex-1.p-5 { padding: 20px !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .flex-1.p-5 label {
  margin-bottom: 6px !important;
  color: #b5bac1 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .flex-1.p-5 input,
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .flex-1.p-5 textarea {
  border-radius: 8px !important;
  background: #0d0e12 !important;
  border-color: rgba(255, 255, 255, .1) !important;
  font-size: 14px !important;
  transition: border-color .15s !important;
}
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .flex-1.p-5 input:focus,
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .flex-1.p-5 textarea:focus { border-color: #3b82f6 !important; box-shadow: none !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .flex-1.p-5 input::placeholder,
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .flex-1.p-5 textarea::placeholder { color: #5c6069; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .flex-1.p-5 input + p { text-align: right; color: #5c6069 !important; }
/* Sélecteur de catégorie */
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .grid.grid-cols-2 > div:first-child button:first-of-type {
  height: 40px;
  border-radius: 8px !important;
  background: #0d0e12 !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
}
/* Tarif sélectionné : neutre */
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .grid.grid-cols-2 .grid.grid-cols-1 > button {
  height: 40px;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .grid.grid-cols-2 .grid.grid-cols-1 > button[style*="68, 134, 239"] {
  background: #1b1d24 !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: #f2f3f5 !important;
}
/* « Épingler en haut » : un interrupteur simple */
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .space-y-4 > button.w-full {
  height: 44px;
  padding: 0 14px !important;
  border-radius: 8px !important;
  background: #0d0e12 !important;
  border-color: rgba(255, 255, 255, .1) !important;
  color: #b5bac1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .space-y-4 > button.w-full > span:last-child {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #3a3d46;
  font-size: 0;
  transition: background-color .15s;
}
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .space-y-4 > button.w-full > span:last-child::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s;
}
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .space-y-4 > button.w-full[style*="250, 204, 21"] > span:last-child { background: #3b82f6; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) .space-y-4 > button.w-full[style*="250, 204, 21"] > span:last-child::after { transform: translateX(14px); }

/* Pied */
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) > .flex.flex-col > .p-5:last-child { padding: 14px 20px !important; border-top-color: rgba(255, 255, 255, .07) !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) > .flex.flex-col > .p-5:last-child > button:first-child {
  height: 36px;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #b5bac1 !important;
}
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) > .flex.flex-col > .p-5:last-child > button:first-child:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) > .flex.flex-col > .p-5:last-child > .fg-btn {
  height: 36px;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #3b82f6 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) > .flex.flex-col > .p-5:last-child > .fg-btn:hover { background: #2f6fd8 !important; }
html body #root .max-w-xl:has(.w-7.h-7.rounded-full) > .flex.flex-col > .p-5:last-child > .fg-btn.opacity-40 {
  opacity: 1 !important;
  background: #1b1d24 !important;
  color: #5c6069 !important;
}