:root{--navy:#123a63;--blue:#1769aa;--sky:#eaf4fb;--ink:#17324d;--muted:#5e7184;--white:#fff;--line:#dbe6ef;--shadow:0 14px 40px rgba(18,58,99,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#f7fafc;line-height:1.7}.wrap{width:min(1120px,92%);margin:auto}.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:0 3px 14px rgba(18,58,99,.06)}.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}.brand{font-size:1.75rem;font-weight:800;letter-spacing:-.04em;color:var(--navy);text-decoration:none}.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}.nav a{color:var(--ink);text-decoration:none;padding:9px 12px;border-radius:8px;font-weight:600;font-size:.94rem}.nav a:hover{background:var(--sky);color:var(--blue)}main{min-height:60vh}.hero{background:linear-gradient(135deg,#eef7fd 0%,#fff 62%,#e9f3fb 100%);border-bottom:1px solid var(--line);padding:76px 0 66px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(23,105,170,.08);right:-110px;top:-110px}.hero .wrap{position:relative;z-index:1}.hero h1{max-width:850px;margin:0 0 18px;font-size:clamp(2.25rem,5vw,4rem);line-height:1.08;letter-spacing:-.045em;color:var(--navy)}.hero p{max-width:820px;margin:0 0 28px;color:var(--muted);font-size:1.15rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:5px 8px 5px 0;padding:12px 19px;border-radius:9px;background:var(--navy);color:#fff!important;text-decoration:none;font-weight:700;box-shadow:0 7px 18px rgba(18,58,99,.14);transition:.2s}.btn:hover{transform:translateY(-1px);background:#0d2d4d}.section{padding:58px 0}.section h2{font-size:clamp(1.55rem,3vw,2.2rem);line-height:1.2;margin:0 0 14px;color:var(--navy);letter-spacing:-.025em}.section> .wrap>p{max-width:820px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow);height:100%}.card h2,.card h3{margin-top:0;color:var(--navy);line-height:1.3}.card p{margin-bottom:0;color:var(--muted)}.muted{color:var(--muted)}.footer{background:#102f4d;color:#dce8f2;padding:42px 0;margin-top:20px}.footer strong{color:#fff;font-size:1.1rem}.footer p{margin:9px 0;color:#c6d5e2}.footer a{color:#fff;text-decoration:none}.footer a:hover{text-decoration:underline}@media(max-width:800px){.top{position:static}.top .wrap{align-items:flex-start;flex-direction:column;padding:14px 0}.nav{justify-content:flex-start}.nav a{padding:7px 9px;font-size:.88rem}.hero{padding:52px 0}.grid{grid-template-columns:1fr}.section{padding:44px 0}.card{padding:22px}}@media(max-width:520px){.hero h1{font-size:2.1rem}.hero p{font-size:1rem}.btn{width:100%;margin-right:0}.nav{gap:2px}.nav a{font-size:.82rem}.wrap{width:min(94%,1120px)}}

/* SRM role login portal styling — polished, responsive, accessible */
.login-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:72px 0 78px;
  background:
    radial-gradient(circle at 8% 12%,rgba(23,105,170,.10),transparent 30%),
    radial-gradient(circle at 92% 82%,rgba(123,63,228,.08),transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#fff 100%);
  border-bottom:1px solid var(--line)
}
.login-section:before,.login-section:after{content:"";position:absolute;z-index:-1;border-radius:999px;filter:blur(2px);pointer-events:none}
.login-section:before{width:260px;height:260px;right:-100px;top:-100px;background:rgba(23,105,232,.08)}
.login-section:after{width:220px;height:220px;left:-110px;bottom:-100px;background:rgba(7,155,108,.06)}
.login-heading{text-align:center;margin:0 auto 34px;max-width:850px}
.login-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid #cfe2f2;border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 5px 16px rgba(18,58,99,.06);color:#1769aa;font-weight:800;letter-spacing:.09em;font-size:.78rem;margin-bottom:13px}
.lock-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#eaf4fb;font-size:.86rem;line-height:1}
.login-heading h2{font-size:clamp(2rem,4vw,3.15rem);line-height:1.08;color:var(--navy);letter-spacing:-.045em;margin:0 0 12px}
.login-heading p{max-width:760px;margin:0 auto;color:var(--muted);font-size:1.02rem}
.login-heading p strong{color:var(--ink);font-weight:700}
.login-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.login-card{
  --portal-accent:#1769e8;--portal-text:#0e438f;
  position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;column-gap:14px;min-height:224px;
  padding:24px 20px 20px;border:1px solid rgba(185,207,225,.85);border-radius:20px;text-decoration:none!important;color:inherit!important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,250,254,.96));
  box-shadow:0 10px 28px rgba(18,58,99,.07),0 2px 6px rgba(18,58,99,.04);
  overflow:hidden;transform:translateY(0);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
.login-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--portal-accent),color-mix(in srgb,var(--portal-accent),white 30%))}
.login-card:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-58px;bottom:-58px;background:var(--portal-accent);opacity:.055;transition:transform .25s ease,opacity .25s ease}
.login-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--portal-accent),#fff 45%);box-shadow:0 20px 42px rgba(18,58,99,.13),0 4px 10px rgba(18,58,99,.05)}
.login-card:hover:after{transform:scale(1.35);opacity:.085}
.login-card:focus-visible{outline:3px solid color-mix(in srgb,var(--portal-accent),#fff 35%);outline-offset:4px}
.portal-icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;grid-row:1/4;border-radius:17px;background:linear-gradient(145deg,var(--portal-accent),color-mix(in srgb,var(--portal-accent),#000 12%));color:#fff;font-size:1.5rem;line-height:1;box-shadow:0 9px 18px color-mix(in srgb,var(--portal-accent),transparent 72%);transition:transform .22s ease}
.login-card:hover .portal-icon{transform:translateY(-2px) rotate(-2deg)}
.portal-copy{display:flex;flex-direction:column;gap:7px;padding-top:1px;min-width:0}
.portal-copy strong{color:var(--portal-text);font-size:1.08rem;line-height:1.3;letter-spacing:-.01em}
.portal-copy span{color:#526f89;font-size:.9rem;line-height:1.55}
.portal-action{grid-column:2;justify-self:start;align-self:end;display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:9px 15px;border:1px solid color-mix(in srgb,var(--portal-accent),#fff 60%);border-radius:999px;background:rgba(255,255,255,.74);color:var(--portal-text);font-weight:800;font-size:.88rem;box-shadow:0 4px 12px rgba(18,58,99,.06);transition:background .2s ease,color .2s ease,transform .2s ease}
.portal-action span{font-size:1.05em;transition:transform .2s ease}
.login-card:hover .portal-action{background:var(--portal-accent);color:#fff;border-color:var(--portal-accent);transform:translateX(2px)}
.login-card:hover .portal-action span{transform:translateX(3px)}
.login-admin{--portal-accent:#1769e8;--portal-text:#0e438f;background:linear-gradient(145deg,#fff,#f1f6ff)}
.login-teacher{--portal-accent:#7b3fe4;--portal-text:#4820a0;background:linear-gradient(145deg,#fff,#faf6ff)}
.login-student{--portal-accent:#079b6c;--portal-text:#08714f;background:linear-gradient(145deg,#fff,#f0fbf7)}
.login-bursar{--portal-accent:#f77b16;--portal-text:#b45108;background:linear-gradient(145deg,#fff,#fff7ed)}
.login-librarian{--portal-accent:#0b9db6;--portal-text:#08758a;background:linear-gradient(145deg,#fff,#effbfd)}
.login-staff{--portal-accent:#e93455;--portal-text:#bb1937;background:linear-gradient(145deg,#fff,#fff2f5)}
.login-result{--portal-accent:#1769e8;--portal-text:#0e438f;background:linear-gradient(145deg,#fff,#f2f7ff)}
.nav-login{position:relative;background:linear-gradient(135deg,#123a63,#1769aa)!important;color:#fff!important;border-radius:999px!important;padding:9px 18px!important;box-shadow:0 7px 16px rgba(18,58,99,.16);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.nav-login:hover{background:linear-gradient(135deg,#0d2d4d,#155f99)!important;transform:translateY(-1px);box-shadow:0 10px 20px rgba(18,58,99,.2)}
.nav a{transition:background .18s ease,color .18s ease,transform .18s ease}
.nav a:not(.nav-login):hover{transform:translateY(-1px)}
@media(max-width:1050px){.login-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.login-section{padding:48px 0 54px}.login-heading{margin-bottom:25px}.login-grid{grid-template-columns:1fr;gap:14px}.login-card{min-height:188px;padding:20px;border-radius:17px}.portal-icon{width:52px;height:52px;border-radius:15px;font-size:1.35rem}.portal-copy strong{font-size:1.03rem}.portal-copy span{font-size:.87rem}.portal-action{padding:8px 14px;font-size:.84rem}.login-eyebrow{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.login-card,.portal-icon,.portal-action,.portal-action span,.nav a{transition:none!important}.login-card:hover{transform:none}.login-card:hover .portal-icon,.login-card:hover .portal-action{transform:none}}

/* ==========================================================
   SRM LOGIN PORTALS — FINAL VISUAL POLISH
   ========================================================== */
.login-section {
  padding: 64px 0 76px;
  background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 52%, #f7fbff 100%);
  border-top: 1px solid #dce9f5;
  border-bottom: 1px solid #dce9f5;
}

.login-heading {
  max-width: 900px;
  margin: 0 auto 34px;
  text-align: center;
}

.login-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 7px 14px;
  border: 1px solid #c9def0;
  border-radius: 999px;
  background: #ffffff;
  color: #1769aa;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  box-shadow: 0 6px 18px rgba(18,58,99,.07);
}

.login-eyebrow .lock-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf4fb;
}

.login-heading h2 {
  margin: 0 0 12px;
  color: #123a63;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.login-heading p {
  max-width: 760px;
  margin: 0 auto;
  color: #5e7184;
  font-size: 1rem;
}

.login-heading p strong { color: #17324d; }

.login-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.login-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 238px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #d7e4ef;
  border-radius: 20px;
  background: #fff !important;
  color: #17324d !important;
  text-decoration: none !important;
  box-shadow: 0 10px 28px rgba(18,58,99,.08);
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: #1769e8;
}

.login-card::after {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -46px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #1769e8;
  opacity: .06;
  transition: transform .25s ease;
}

.login-card:hover {
  transform: translateY(-7px);
  border-color: #a9c7df;
  box-shadow: 0 20px 42px rgba(18,58,99,.15);
}

.login-card:hover::after { transform: scale(1.3); }

.login-card:focus-visible {
  outline: 3px solid #75b9ee;
  outline-offset: 3px;
}

.portal-icon {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 17px;
  background: #1769e8;
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  box-shadow: 0 10px 20px rgba(23,105,232,.22);
  transition: transform .22s ease;
}

.login-card:hover .portal-icon { transform: translateY(-2px) rotate(-2deg); }

.portal-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
}

.portal-copy strong {
  color: #123a63;
  font-size: 1.08rem;
  line-height: 1.3;
}

.portal-copy span {
  color: #60768a;
  font-size: .9rem;
  line-height: 1.55;
}

.portal-action {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 15px;
  border: 1px solid #c9dbea;
  border-radius: 999px;
  background: #f6faff;
  color: #145b98;
  font-size: .86rem;
  font-weight: 800;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.portal-action span { transition: transform .2s ease; }
.login-card:hover .portal-action {
  background: #1769e8;
  border-color: #1769e8;
  color: #fff;
  transform: translateX(2px);
}
.login-card:hover .portal-action span { transform: translateX(3px); }

.login-admin::before, .login-admin .portal-icon { background: #1769e8; }
.login-teacher::before, .login-teacher .portal-icon { background: #7b3fe4; }
.login-student::before, .login-student .portal-icon { background: #079b6c; }
.login-bursar::before, .login-bursar .portal-icon { background: #e97816; }
.login-librarian::before, .login-librarian .portal-icon { background: #0798b0; }
.login-staff::before, .login-staff .portal-icon { background: #df3152; }
.login-result::before, .login-result .portal-icon { background: #1769e8; }

.login-teacher:hover .portal-action { background: #7b3fe4; border-color: #7b3fe4; }
.login-student:hover .portal-action { background: #079b6c; border-color: #079b6c; }
.login-bursar:hover .portal-action { background: #e97816; border-color: #e97816; }
.login-librarian:hover .portal-action { background: #0798b0; border-color: #0798b0; }
.login-staff:hover .portal-action { background: #df3152; border-color: #df3152; }

/* Make the Login navigation link feel like a deliberate CTA. */
.nav a.nav-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  background: #123a63 !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(18,58,99,.16);
}
.nav a.nav-login:hover {
  background: #1769aa !important;
  color: #fff !important;
}

@media (max-width: 1050px) {
  .login-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .login-section { padding: 48px 0 56px; }
  .login-grid { grid-template-columns: 1fr; gap: 14px; }
  .login-card { min-height: 205px; padding: 21px; border-radius: 17px; }
  .portal-icon { width: 52px; height: 52px; flex-basis: 52px; margin-bottom: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-card, .portal-icon, .portal-action, .portal-action span { transition: none !important; }
  .login-card:hover { transform: none; }
}