:root{
  --meezan-purple:#4B0082;
  --meezan-purple-light:#6B46C1;
  --meezan-green:#0f7b4b;
  --meezan-green-hover:#0c613c;
  --border:#e1e5e9;
  --text:#2d3748;
  --card:#ffffff;
  --bg:#f8fafc;
  --input-bg:#ffffff;
  --input-border:#d1d5db;
  --input-focus:var(--meezan-purple);
  --shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
}

a{
  color:var(--meezan-purple);
  text-decoration:none;
}

header{
  background:var(--meezan-purple);
  color:#fff;
  padding:22px 18px 26px;
  border-radius:0 0 22px 22px;
}

.wrap{
  max-width:600px;
  margin:32px auto;
  padding:0 20px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px;
  box-shadow:var(--shadow-lg);
  position:relative;
}

.section-header{
  font-size:20px;
  font-weight:600;
  margin:0 0 24px;
  padding-bottom:12px;
  border-bottom:2px solid var(--border);
  color:var(--meezan-purple);
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.full{
  grid-column:1/-1;
}

.form-group{
  position:relative;
}

label{
  display:block;
  font-size:14px;
  font-weight:600;
  margin:0 0 8px;
  color:var(--text);
}

input[type=text],
input[type=email],
input[type=password],
select{
  width:100%;
  padding:12px 16px;
  border:2px solid var(--input-border);
  border-radius:12px;
  background:var(--input-bg);
  color:var(--text);
  outline:none;
  transition:all 0.2s ease;
  font-family:inherit;
  font-size:16px;
}

input::placeholder{
  color:#9ca3af;
}

input:focus,
select:focus{
  border-color:var(--input-focus);
  box-shadow:0 0 0 3px rgba(75, 0, 130, 0.1);
  transform:translateY(-1px);
}

input:hover,
select:hover{
  border-color:#9ca3af;
}

select{
  cursor:pointer;
}

.row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:32px;
  justify-content:center;
}

.btn{
  appearance:none;
  border:0;
  border-radius:12px;
  padding:14px 32px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  font-size:16px;
  transition:all 0.2s ease;
  position:relative;
  overflow:hidden;
}

.btn-success{
  background:linear-gradient(135deg, var(--meezan-green) 0%, #059669 100%);
  color:#fff;
  box-shadow:0 4px 14px 0 rgba(15, 123, 75, 0.3);
}

.btn-success:hover{
  background:linear-gradient(135deg, var(--meezan-green-hover) 0%, #047857 100%);
  transform:translateY(-2px);
  box-shadow:0 6px 20px 0 rgba(15, 123, 75, 0.4);
}

.btn-success:active{
  transform:translateY(0);
}

.alert{
  padding:16px 20px;
  border-radius:12px;
  margin-bottom:20px;
  font-size:14px;
  font-weight:500;
  display:none;
  border-left:4px solid;
}

.alert-success{
  background:#f0fdf4;
  border-left-color:#22c55e;
  color:#15803d;
  border:1px solid #bbf7d0;
}

.alert-error{
  background:#fef2f2;
  border-left-color:#ef4444;
  color:#dc2626;
  border:1px solid #fecaca;
}

footer{
  margin:24px 0 0;
  font-size:13px;
  opacity:0.7;
  text-align:center;
  color:#6b7280;
}

/* Mobile responsiveness */
@media(max-width:640px){
  .wrap{
    padding:0 16px;
    margin:20px auto;
  }
  
  .card{
    padding:24px 20px;
    border-radius:12px;
  }
  
  .grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  
  header div{
    padding:24px 16px 32px !important;
    border-radius:0 0 20px 20px !important;
  }
  
  header div > div:first-child{
    flex-direction:column !important;
    gap:12px !important;
  }
  
  header div > div:first-child > div{
    text-align:center !important;
  }
  
  .section-header{
    font-size:18px;
  }
}

/* Enhanced form styling */
input[type=text]:valid,
input[type=email]:valid,
select:valid{
  border-color:var(--meezan-purple-light);
}

/* Loading state for submit button */
.btn-success.loading{
  pointer-events:none;
  opacity:0.7;
}

.btn-success.loading::after{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  margin:auto;
  border:2px solid transparent;
  border-top-color:#ffffff;
  border-radius:50%;
  animation:spin 1s linear infinite;
  top:0;
  left:0;
  bottom:0;
  right:0;
}

@keyframes spin{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

/* Purple theme enhancements */
.section-header{
  background:linear-gradient(135deg, var(--meezan-purple) 0%, var(--meezan-purple-light) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Focus states with purple theme */
input:focus,
select:focus{
  border-color:var(--meezan-purple);
  box-shadow:0 0 0 3px rgba(75, 0, 130, 0.1);
}

/* Hover effects */
.card:hover{
  box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform:translateY(-2px);
  transition:all 0.3s ease;
}