/* ===== TEACHER PAGE — Era of Education (Vedantu-style) ===== */
body{ background:var(--bg-light); margin:0; }

/* HERO — distinct gradient (teal/purple) to visually separate from Student page */
.t-hero{
  background:linear-gradient(120deg,#0E2A4A 0%,#1B1464 45%,#5B3FE0 100%);
  color:#fff;
  padding:70px 6% 90px;
  display:flex; align-items:center; gap:50px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.t-hero::before{
  content:""; position:absolute; width:420px; height:420px;
  background:radial-gradient(circle,rgba(20,200,160,0.35),transparent 70%);
  bottom:-140px; left:-100px; border-radius:50%;
  animation:blobPulse 6s ease-in-out infinite;
}
.t-hero-text{ flex:1; min-width:300px; position:relative; z-index:2; }
.t-hero-text h1{ font-size:clamp(28px,4vw,44px); margin:14px 0 12px; line-height:1.25; }
.t-hero-text p{ font-size:16px; opacity:.92; max-width:480px; margin-bottom:22px; }
.t-hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.t-hero-img{ flex:1; min-width:280px; text-align:center; position:relative; z-index:2; }
.t-hero-img img{ max-width:380px; width:100%; border-radius:24px; box-shadow:0 30px 60px rgba(0,0,0,0.35); }

.t-section{ padding:70px 6%; }
.t-title{ font-size:clamp(24px,3.2vw,34px); text-align:center; margin:0 0 10px; color:var(--text-dark); }
.t-sub{ text-align:center; color:var(--text-mute); max-width:560px; margin:0 auto 44px; font-size:15px; }

.t-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; max-width:1180px; margin:0 auto; }

.earn-pills{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:980px; margin:0 auto; }
.earn-pill{
  padding:14px 22px; border-radius:16px; font-weight:700; font-size:14.5px;
  background:#fff; box-shadow:var(--shadow-soft); color:var(--indigo-700);
  transition:transform .25s ease, box-shadow .25s ease;
}
.earn-pill:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }

.t-row{ display:flex; gap:22px; overflow-x:auto; padding-bottom:8px; max-width:1180px; margin:0 auto; }

.reg-wrap{ background:#fff; max-width:560px; margin:0 auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.reg-head{ background:linear-gradient(135deg,#0E2A4A,#5B3FE0); color:#fff; padding:28px 30px; text-align:center; }
.reg-head h2{ margin:0 0 6px; font-size:24px; }
.reg-head p{ margin:0; opacity:.9; font-size:14px; }
.reg-body{ padding:30px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--text-dark); margin-bottom:6px; }
.field .input-wrap{ position:relative; }
.field .input-wrap span{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:16px; }
.field input{
  width:100%; padding:13px 14px 13px 42px; border-radius:12px;
  border:1.5px solid #E5E5F2; font-size:14.5px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus{ border-color:var(--teal-500); box-shadow:0 0 0 4px rgba(20,200,160,0.14); }
.reg-submit{
  width:100%; padding:15px; border:none; border-radius:var(--radius-pill);
  background:linear-gradient(135deg,#14C8A0,#0C9A7B); color:#fff; font-weight:800; font-size:16px;
  cursor:pointer; box-shadow:0 12px 26px rgba(12,154,123,0.35);
  transition:transform .25s ease;
}
.reg-submit:hover{ transform:translateY(-3px); }
.reg-note{ text-align:center; font-size:12.5px; color:var(--text-mute); margin-top:12px; }

#teacherForm.slide{ animation:slideOutForm .8s forwards; }
@keyframes slideOutForm{ to{ opacity:0; transform:translateX(-60px); } }

.success-box{ display:none; text-align:center; padding:50px 30px; }
.success-box .tick{
  width:70px; height:70px; border-radius:50%; background:#E2FAF3; color:#0C9A7B;
  display:flex; align-items:center; justify-content:center; font-size:34px; margin:0 auto 16px;
}
.success-box h2{ margin:0 0 8px; color:var(--text-dark); }
.success-box p{ color:var(--text-mute); margin:0; }

.t-cta{
  background:linear-gradient(135deg,#14C8A0,#0C9A7B); color:#fff; text-align:center;
  padding:60px 6%; border-radius:28px; max-width:1100px; margin:0 auto;
}
.t-cta h2{ margin:0 0 10px; font-size:clamp(22px,3vw,30px); }
.t-cta p{ margin:0 0 24px; opacity:.95; }

@media (max-width:600px){
  .t-hero{ padding:50px 5% 70px; text-align:center; flex-direction:column; }
  .t-hero-badges{ justify-content:center; }
}