/* Animated institution login experience */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  position: relative;
  overflow: hidden;
  background: #0b1220;
}
@media (max-width: 960px) {
  .login-page { grid-template-columns: 1fr; }
}

/* Animated mesh background */
.login-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.login-bg .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  animation: blobMove 18s ease-in-out infinite;
}
.login-bg .blob.b1 { width: 420px; height: 420px; background: #0d9488; top: -80px; left: -60px; }
.login-bg .blob.b2 { width: 380px; height: 380px; background: #2563eb; bottom: -100px; right: 10%; animation-delay: -6s; }
.login-bg .blob.b3 { width: 300px; height: 300px; background: #f59e0b; top: 40%; left: 35%; animation-delay: -11s; opacity: .35; }
.login-bg .blob.b4 { width: 260px; height: 260px; background: #7c3aed; bottom: 20%; left: 5%; animation-delay: -3s; opacity: .4; }
@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 25px) scale(.95); }
}

/* Soft grid / particles */
.login-bg .grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
.login-bg .orbit {
  position: absolute;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  animation: spin 40s linear infinite;
}
.login-bg .orbit.o1 { width: 520px; height: 520px; top: 10%; left: 5%; }
.login-bg .orbit.o2 { width: 720px; height: 720px; top: -5%; left: -8%; animation-direction: reverse; animation-duration: 55s; }
@keyframes spin { to { transform: rotate(360deg); } }

.login-hero, .login-panel {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem);
}
.login-hero { color: #f8fafc; }
.login-hero h1 {
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -.02em;
}
.login-hero p {
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: .9;
  max-width: 34rem;
  margin: 0 0 1.5rem;
}

/* Floating infographic icons */
.login-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.float-icon {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  animation: floatY 6s ease-in-out infinite;
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
}
.float-icon.sm { width: 44px; height: 44px; font-size: 1.25rem; border-radius: 12px; }
.float-icon:nth-child(1) { top: 10%; left: 8%; }
.float-icon:nth-child(2) { top: 18%; right: 12%; animation-delay: 1s; animation-duration: 7s; }
.float-icon:nth-child(3) { top: 48%; left: 12%; animation-delay: .5s; animation-duration: 5.5s; }
.float-icon:nth-child(4) { bottom: 22%; right: 16%; animation-delay: 1.6s; }
.float-icon:nth-child(5) { bottom: 14%; left: 28%; animation-delay: .2s; animation-duration: 8s; }
.float-icon:nth-child(6) { top: 36%; right: 6%; animation-delay: 2s; }
.float-icon:nth-child(7) { top: 68%; left: 42%; animation-delay: 1.3s; animation-duration: 6.5s; }
.float-icon:nth-child(8) { top: 8%; left: 42%; animation-delay: .8s; }
.float-icon:nth-child(9) { bottom: 8%; right: 36%; animation-delay: 2.4s; }
.float-icon:nth-child(10) { top: 55%; right: 28%; animation-delay: 1.1s; animation-duration: 7.5s; }
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(8deg); }
}

.login-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.login-badge {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

/* Institution type visual strip */
.inst-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
  margin-top: 1.75rem;
  max-width: 420px;
}
.inst-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: .75rem .5rem;
  text-align: center;
  transition: transform .25s, background .25s;
}
.inst-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.18); }
.inst-card .ic { font-size: 1.6rem; display: block; margin-bottom: .25rem; }
.inst-card .lb { font-size: .72rem; opacity: .9; font-weight: 600; }

.login-panel { align-items: center; background: transparent; }
.login-card {
  width: min(420px, 100%);
  background: rgba(255,255,255,.96);
  border-radius: 20px;
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.5);
  animation: cardIn .6s ease-out;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.login-card h2 {
  margin: .25rem 0 .35rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  text-align: center;
}
.login-card .sub {
  text-align: center;
  color: #64748b;
  font-size: .9rem;
  margin: 0 0 1rem;
}
.role-chips {
  display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-bottom: 1rem;
}
.role-chip {
  background: #f0fdfa;
  color: #0f766e;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .72rem;
  font-weight: 600;
}
.login-demo {
  margin-top: 1rem;
  font-size: .8rem;
  color: #64748b;
  text-align: center;
  background: #f8fafc;
  border-radius: 10px;
  padding: .65rem;
}
.login-footer-links {
  margin-top: 1rem;
  text-align: center;
  font-size: .85rem;
}
.login-footer-links a { color: #0d9488; font-weight: 600; }

/* Institution-aware accent themes */
.login-page.theme-madrasha .blob.b1 { background: #059669; }
.login-page.theme-madrasha .blob.b2 { background: #0f766e; }
.login-page.theme-college .blob.b1 { background: #1d4ed8; }
.login-page.theme-college .blob.b2 { background: #7c3aed; }
.login-page.theme-university .blob.b1 { background: #4f46e5; }
.login-page.theme-university .blob.b2 { background: #db2777; }
.login-page.theme-school .blob.b1 { background: #0d9488; }
.login-page.theme-school .blob.b2 { background: #2563eb; }

@media (max-width: 960px) {
  .login-hero { min-height: auto; padding-top: 2rem; padding-bottom: 1rem; }
  .login-panel { min-height: auto; padding-bottom: 2.5rem; }
  .float-icon:nth-child(n+7) { display: none; }
  .inst-strip { max-width: 100%; }
}

/* ========== Tamirul Millat login (tmt.edu.bd/login style) ========== */
.login-page.theme-tmt {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #0d7377 0%, #2d9a8f 45%, #a8d5a2 100%);
  grid-template-columns: none;
}
.tmt-login-shell { width: 100%; max-width: 920px; }
.tmt-login-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.28);
  min-height: 480px;
}
@media (max-width: 800px) {
  .tmt-login-card { grid-template-columns: 1fr; }
  .tmt-login-visual { min-height: 180px; max-height: 200px; }
}
.tmt-login-visual {
  position: relative;
  background: #0f766e;
  min-height: 100%;
}
.tmt-login-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 480px;
}
.tmt-login-visual-fallback {
  min-height: 480px;
  background:
    linear-gradient(160deg, rgba(13,115,119,.55), rgba(15,23,42,.35)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600'%3E%3Crect fill='%230d7377' width='800' height='600'/%3E%3Crect fill='%232d9a8f' x='80' y='120' width='280' height='360' rx='8' opacity='.5'/%3E%3Crect fill='%23a8d5a2' x='400' y='160' width='260' height='320' rx='8' opacity='.35'/%3E%3Ccircle fill='%23fff' cx='200' cy='80' r='28' opacity='.25'/%3E%3C/svg%3E") center/cover;
}
.tmt-login-form {
  padding: 2rem 2.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tmt-login-brand { text-align: center; margin-bottom: 1.25rem; }
.tmt-login-logo {
  width: 72px; height: 72px; object-fit: contain;
  border-radius: 50%; background: #fff;
  box-shadow: 0 4px 14px rgba(13,115,119,.2);
  margin-bottom: 0.65rem;
}
.tmt-login-logo-ph {
  width: 72px; height: 72px; margin: 0 auto 0.65rem;
  border-radius: 50%; background: #e6f4f1; display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
}
.tmt-login-brand h1 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #0d7377;
  line-height: 1.3;
}
.tmt-login-addr {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: #64748b;
}
.tmt-lbl {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  margin: 0.55rem 0 0.3rem;
}
.tmt-field {
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 0.65rem;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.tmt-field:focus-within {
  border-color: #0d7377;
  box-shadow: 0 0 0 3px rgba(13,115,119,.15);
}
.tmt-ico { color: #94a3b8; font-size: 0.95rem; margin-right: 0.35rem; }
.tmt-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.7rem 0.25rem;
  font-size: 0.95rem;
  background: transparent;
  color: #0f172a;
}
.tmt-eye {
  border: none; background: transparent; cursor: pointer; font-size: 0.95rem; padding: 0.25rem;
}
.tmt-row {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0.75rem 0 1rem; font-size: 0.82rem;
}
.tmt-remember { color: #475569; display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.tmt-forgot { color: #0d7377; font-weight: 600; cursor: default; }
.tmt-signin {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(90deg, #0d7377 0%, #2d9a8f 55%, #b7dfb0 100%);
  box-shadow: 0 8px 20px rgba(13,115,119,.28);
  transition: filter .15s, transform .1s;
}
.tmt-signin:hover:not(:disabled) { filter: brightness(1.05); }
.tmt-signin:disabled { opacity: 0.7; cursor: wait; }
.tmt-demo {
  text-align: center;
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0.85rem 0 0.35rem;
}
.tmt-links {
  text-align: center;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.tmt-links a { color: #0d7377; text-decoration: none; font-weight: 600; margin: 0 0.25rem; }
.tmt-links a:hover { text-decoration: underline; }
.tmt-lang { display: flex; justify-content: center; margin-top: 0.25rem; }

/* ========== Edufy login ========== */
.login-page.theme-edufy {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(145deg, #0f172a 0%, #1e3a5f 40%, #0ea5e9 100%);
  grid-template-columns: none;
}
.edufy-login-wrap { width: 100%; max-width: 420px; }
.edufy-login-card {
  background: #fff;
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.edufy-login-head { text-align: center; margin-bottom: 1rem; }
.edufy-login-logo { width: 64px; height: 64px; object-fit: contain; margin-bottom: 0.5rem; }
.edufy-login-head h1 { margin: 0; font-size: 1.25rem; color: #0f172a; }
.edufy-login-head p { margin: 0.35rem 0 0; color: #64748b; font-size: 0.9rem; }