/* ================================
   Project Controls – Forms Theme
   SmartFlow / Zumwalt Field Forms
   ================================ */

:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --card:#0D1429;
  --stroke:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --glow:rgba(77,152,255,.45);
  --glow2:rgba(0,255,198,.28);
}

html,body{
  height:100%;
}

body{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(77,152,255,.14), transparent 55%),
    radial-gradient(900px 500px at 80% 30%, rgba(0,255,198,.10), transparent 50%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
  font-family: Inter, system-ui, sans-serif;
}


/* ================================
   FORM CONTAINER
   ================================ */

.form-container{
  max-width:600px;
  margin:auto;
  padding:30px 15px;
}


/* ================================
   FORM CARDS
   ================================ */

.form-card{
  background: linear-gradient(180deg, rgba(13,20,41,.92), rgba(10,14,28,.92));
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:20px;
  margin-bottom:20px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 18px 60px rgba(0,0,0,.55),
    0 0 28px var(--glow);
}


/* ================================
   HEADERS
   ================================ */

.form-title{
  font-size:26px;
  font-weight:700;
  text-align:center;
  margin-bottom:6px;
}

.form-subtitle{
  text-align:center;
  color:var(--muted);
  margin-bottom:20px;
}


/* ================================
   LABELS
   ================================ */

label{
  font-weight:600;
  margin-top:10px;
  margin-bottom:4px;
  font-size:.9rem;
}


/* ================================
   INPUTS
   ================================ */

input,
select,
textarea{
  background: rgba(255,255,255,.06) !important;
  border:1px solid var(--stroke) !important;
  color:var(--text) !important;
  border-radius:8px !important;
  padding:10px !important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none !important;
  border-color:rgba(77,152,255,.5) !important;
  box-shadow:0 0 12px var(--glow) !important;
}

input::placeholder,
textarea::placeholder{
  color:rgba(255,255,255,.35);
}


/* ================================
   SELECT MENU FIX
   ================================ */

select.form-select,
select.form-select option{
  background-color:#0b1220 !important;
  color:#ffffff !important;
}

select.form-select option:disabled{
  color:rgba(255,255,255,.4) !important;
}


/* ================================
   BUTTONS
   ================================ */

.btn-glow{
  background:linear-gradient(135deg,#4d98ff,#00ffc6);
  border:none;
  color:#001018;
  font-weight:700;
  padding:12px;
  border-radius:10px;

  box-shadow:
    0 0 18px var(--glow2),
    0 10px 20px rgba(0,0,0,.4);
}

.btn-glow:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 28px var(--glow2),
    0 14px 28px rgba(0,0,0,.5);
}


/* ================================
   SECTION TITLES
   ================================ */

.section-title{
  font-size:16px;
  font-weight:600;
  margin-bottom:10px;
  color:var(--muted);
}


/* ================================
   MOBILE OPTIMIZATION
   ================================ */

@media (max-width:768px){

  .form-container{
    padding:20px 10px;
  }

  input,
  select,
  textarea{
    font-size:16px;
  }

}


/* ================================
   FOOTER
   ================================ */

.form-footer{
  text-align:center;
  margin-top:20px;
  color:var(--muted);
  font-size:.8rem;
}