.neon-grid{
  background:
    radial-gradient(circle at 20% 20%, rgba(34,211,238,.25), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(217,70,239,.20), transparent 45%),
    linear-gradient(to right, rgba(148,163,184,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.08) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}

.card{
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(51,65,85,.7);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 0 0 1px rgba(34,211,238,.08), 0 10px 30px rgba(0,0,0,.45);
}

.shadow-neon{
  box-shadow: 0 0 24px rgba(34,211,238,.18), 0 0 38px rgba(217,70,239,.10);
}

.hover-glow:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(34,211,238,.15), 0 18px 40px rgba(0,0,0,.6);
  transition: .15s ease;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .5rem .75rem;
  border-radius: 12px;
  border: 1px solid rgba(51,65,85,.8);
  background: rgba(2,6,23,.35);
  color: rgba(226,232,240,1); /* ✅ texte clair */
}

.btn:hover{ border-color: rgba(34,211,238,.35); }

.btn-primary{
  background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(217,70,239,.20));
  border-color: rgba(34,211,238,.35);
}

.btn-danger{ border-color: rgba(239,68,68,.35); }

.label{
  display:block;
  font-size:.85rem;
  color: rgba(148,163,184,1);
  margin-bottom:.25rem;
}

/* ✅ Inputs dark futuristes (input/select/textarea) */
.input{
  width:100%;
  padding:.6rem .7rem;
  border-radius: 12px;

  background: rgba(2,6,23,.55);
  border: 1px solid rgba(51,65,85,.75);

  color: rgba(226,232,240,1);           /* ✅ texte clair */
  caret-color: rgba(34,211,238,.9);     /* ✅ curseur néon */
}

/* Placeholder lisible */
.input::placeholder{
  color: rgba(148,163,184,.8);
}

/* Focus néon */
.input:focus{
  outline:none;
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 0 0 3px rgba(34,211,238,.12);
}

/* Validation (optionnel mais nice) */
.input:invalid{
  border-color: rgba(239,68,68,.35);
}

/* ✅ Autofill Chrome (sinon ça devient blanc/jaune) */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(226,232,240,1);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(2,6,23,.65) inset;
  border: 1px solid rgba(51,65,85,.75);
}

/* ✅ Select: petite flèche + look cohérent */
select.input{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(148,163,184,.9) 50%),
    linear-gradient(135deg, rgba(148,163,184,.9) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

/* ===== FORME GLOBAL (dark futuriste) ===== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  width: 100%;
  padding: .6rem .7rem;
  border-radius: 12px;

  background: rgba(2,6,23,.55);
  border: 1px solid rgba(51,65,85,.75);

  color: rgba(226,232,240,1);
  caret-color: rgba(34,211,238,.9);
}

input::placeholder,
textarea::placeholder {
  color: rgba(148,163,184,.8);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(34,211,238,.55);
  box-shadow: 0 0 0 3px rgba(34,211,238,.12);
}

/* Autofill Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: rgba(226,232,240,1);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(2,6,23,.65) inset;
  border: 1px solid rgba(51,65,85,.75);
}

/* Select: flèche */
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(148,163,184,.9) 50%),
    linear-gradient(135deg, rgba(148,163,184,.9) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

body { outline: 6px solid lime !important; }

/* ===== DARK FUTURISTE : FORME GLOBAL (FORCÉ) ===== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  width: 100% !important;
  padding: .6rem .7rem !important;
  border-radius: 12px !important;

  background: rgba(2,6,23,.55) !important;
  color: rgba(226,232,240,1) !important;
  border: 1px solid rgba(51,65,85,.75) !important;

  caret-color: rgba(34,211,238,.9) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(148,163,184,.85) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(34,211,238,.55) !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.12) !important;
}

/* Autofill Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: rgba(226,232,240,1) !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(2,6,23,.70) inset !important;
  border: 1px solid rgba(51,65,85,.75) !important;
}

/* Select: flèche */
select {
  appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(148,163,184,.9) 50%),
    linear-gradient(135deg, rgba(148,163,184,.9) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50% !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  padding-right: 2.2rem !important;
}


input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  background: rgba(2,6,23,.55) !important;
  color: rgba(226,232,240,1) !important;
  border: 1px solid rgba(51,65,85,.75) !important;
}