body[data-theme="light"] form{
  background:linear-gradient(180deg, rgb(209, 247, 234), rgba(199, 234, 199, 0.95));
}

body[data-theme="light"] .form-group input,
body[data-theme="light"] .form-group select
{
    background-color:rgb(239, 253, 253);
    border: 1px solid rgb(168, 216, 232);
    color: #000;
}

body[data-theme="light"] form i{
    color: red;
}

body[data-theme="light"] .form-group label{
  color: #000;
}
/* ====== FORM WRAPPER ====== */
form{
  max-width:1100px;
  margin:30px auto 60px;
  padding:24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,43,43,.08), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(0,234,255,.08), transparent 40%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px),
    linear-gradient(180deg, #080000, #02040a);
  border:1px solid rgba(0,234,255,.2);
  border-radius:16px;
  box-shadow:0 0 30px rgba(0,234,255,.2);
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  position:relative;
  overflow:hidden;
}

/* ====== TITLE ====== */
h2{
  text-align:center;
  color:#ff2d2d;
  margin:30px 0 10px;
  font-family:'Orbitron', sans-serif;
  letter-spacing:1px;
  text-shadow:0 0 10px rgba(255,45,45,.7), 0 0 20px rgba(0,234,255,.3);
}

/* ====== FORM GROUP ====== */
.form-group{
  flex:1 1 calc(33.333% - 16px);
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
}

/* ====== LABEL ====== */
.form-group label{
  font-size:14px;
  letter-spacing:1px;
  color:#f1fa43;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-transform:uppercase;
}

/* ====== INPUT / SELECT ====== */
.form-group input,
.form-group select{
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:rgba(8,14,40,.9);
  border:1px solid rgba(0,234,255,.25);
  border-radius:8px;
  padding:11px 12px;
  color:#eaffff;
  outline:none;
  transition:.25s ease;
}

/* ====== FOCUS EFFECT ====== */
.form-group input:focus,
.form-group select:focus{
  border-color:#ff2d2d;
  box-shadow:0 0 0 2px rgba(255,45,45,.25), 0 0 15px rgba(0,234,255,.35);
  background:rgba(10,18,56,.95);
}

/* ====== FILE INPUT ====== */
.form-group input[type="file"]{
  padding:8px;
  cursor:pointer;
}

/* ====== BUTTON ====== */
form button{
  width:100%;
  margin-top:10px;
  padding:14px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg, #ff2d2d, #8b0000);
  color:#fff;
  font-family:'Orbitron', sans-serif;
  font-weight:700;
  letter-spacing:1px;
  cursor:pointer;
  box-shadow:0 0 20px rgba(255,45,45,.6);
  transition:.25s ease;
}

form button:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 0 30px rgba(255,45,45,.9), 0 0 25px rgba(0,234,255,.35);
}

/* ====== CYBER SCAN LINE (DECOR) ====== */
form::after{
  content:"";
  position:absolute;
  top:-100%;
  left:0;
  width:100%;
  height:120%;
  background:linear-gradient(180deg, transparent, rgba(0,234,255,.08), transparent);
  animation:scan 5s linear infinite;
  pointer-events:none;
}

@keyframes scan{
  0%{top:-120%;}
  100%{top:120%;}
}

/* ====== MOBILE RESPONSIVE ====== */
@media(max-width:900px){
  .form-group{flex:1 1 calc(50% - 16px);}
}

@media(max-width:600px){
  .form-group{flex:1 1 100%;}
  h2{font-size:22px;}
}

.form-group label i{
  color:#00eaff;
  margin-right:6px;
  text-shadow:0 0 8px rgba(0,234,255,.6);
}

form button i{
  margin-right:8px;
}