/* Education ERP authentication screens (institution + platform).
 * Fully scoped to these two anonymous pages. No remote fonts or libraries.
 */
:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }
body.auth-page {
  --auth-accent: #1260d7;
  --auth-accent-dark: #0645ae;
  --auth-focus: #1683f4;
  --auth-text: #082c46;
  --auth-muted: #667c94;
  --auth-border: #d5e0eb;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--auth-text);
  background: #071e36;
  font-family: "Noto Sans Bengali", "Noto Sans", "Hind Siliguri", system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
body.auth-page--admin {
  --auth-accent: #237cf4;
  --auth-accent-dark: #125dd2;
  --auth-focus: #54b5ff;
  --auth-text: #f3f8ff;
  --auth-muted: #a9bad0;
  --auth-border: #344d6e;
  background: #071326;
  color-scheme: dark;
}
.auth-page a { color: inherit; text-underline-offset: 3px; }
.auth-page button, .auth-page input { font: inherit; }
.auth-page button { cursor: pointer; }
.auth-page :is(a,button,input):focus-visible {
  outline: 3px solid var(--auth-focus);
  outline-offset: 3px;
}
.auth-page .auth-layout {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(400px, .86fr);
  isolation: isolate;
  overflow: hidden;
}
.auth-page .auth-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: radial-gradient(ellipse at 68% 20%, #2663a1 0%, transparent 48%),
    linear-gradient(128deg, #062b4c 0%, #08203c 58%, #071b30 100%);
}
.auth-page--admin .auth-layout::before {
  background: radial-gradient(ellipse at 75% 24%, #154175 0%, transparent 47%),
    linear-gradient(128deg, #081c39 0%, #0a1930 58%, #081427 100%);
}
.auth-page .auth-layout::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: linear-gradient(rgba(119,194,245,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119,194,245,.085) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent, black);
}
.auth-page .auth-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(30px, 4vw, 68px) clamp(27px, 4vw, 70px);
  min-width: 0;
  min-height: 100%;
  color: #fff;
}
.auth-page .auth-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -23% 0 0;
  background-image: linear-gradient(90deg, rgba(3,25,48,.97) 0%, rgba(5,32,62,.88) 53%, rgba(7,37,66,.59) 100%),
    url("../images/auth-campus.svg");
  background-size: cover;
  background-position: center bottom;
  opacity: .96;
  pointer-events: none;
}
.auth-page--admin .auth-hero::before {
  background-image: linear-gradient(90deg, rgba(4,16,37,.93), rgba(4,22,43,.78) 72%, rgba(8,28,53,.46)),
    url("../images/auth-control-room.svg");
}
.auth-page .auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  text-decoration: none;
}
.auth-page .auth-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(231,245,255,.94);
  border-radius: 14px;
  font: 800 21px/1 "Noto Sans", system-ui, sans-serif;
  letter-spacing: -.04em;
  background: rgba(7,42,69,.64);
  box-shadow: 0 6px 22px rgba(0,13,38,.19);
  color: white;
}
.auth-page .auth-brand-copy { display: flex; flex-direction: column; gap: 3px; }
.auth-page .auth-brand-name { font-weight: 800; font-size: clamp(13px, 1.35vw, 20px); line-height: 1.4; }
.auth-page .auth-brand-kicker { color: #a9cbe5; font: 700 11px/1.5 system-ui,sans-serif; letter-spacing: .18em; }
.auth-page .auth-hero-content {
  width: min(100%, 660px);
  margin: auto 0;
  padding: 18px 0 22px;
}
.auth-page .auth-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(123,198,250,.27);
  border-radius: 999px;
  background: rgba(22,88,147,.26);
  color: #bfe1ff;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.auth-page .auth-hero-label svg { width: 17px; height: 17px; }
.auth-page .auth-hero h1 {
  margin: clamp(17px,2vw,28px) 0 15px;
  font-size: clamp(32px, 3vw, 49px);
  font-weight: 850;
  line-height: 1.38;
  letter-spacing: -.025em;
  color: #f8fcff;
}
.auth-page .auth-hero h1 span {
  display: block;
  color: #72c5ff;
}
.auth-page .auth-hero-description {
  max-width: 660px;
  color: #d6e6f6;
  font-size: clamp(14px,1.12vw,17px);
  line-height: 1.9;
  margin: 0 0 23px;
}
.auth-page .auth-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.auth-page .auth-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 112px;
  padding: 13px 6px;
  border: 1px solid rgba(168,207,244,.18);
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(30,79,126,.43), rgba(13,49,86,.26));
  backdrop-filter: blur(8px);
  color: #f5fbff;
  text-align: center;
}
.auth-page .auth-feature-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(103,176,237,.15);
  font-size: 25px;
  line-height: 1;
}
.auth-page .auth-feature-label { font-weight: 750; font-size: 12px; line-height: 1.6; }
.auth-page .auth-hero-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 19px;
  color: #c8e4ed;
  font-weight: 650;
  font-size: 12px;
}
.auth-page .auth-hero-footnote span { display: inline-flex; align-items: center; gap: 7px; }
.auth-page .auth-hero-footnote svg { width: 17px; height: 17px; color: #48dace; }
.auth-page .auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 36px clamp(23px, 4.5vw, 80px) 36px 10px;
}
.auth-page .auth-card {
  width: min(100%, 530px);
  padding: clamp(29px, 3vw, 48px);
  border-radius: 22px;
  border: 1px solid rgba(221,231,239,.8);
  background: #fff;
  box-shadow: 0 26px 85px rgba(1,14,32,.33), 0 3px 12px rgba(0,24,47,.08);
  color: #15334b;
}
.auth-page .auth-card-top { text-align: center; margin-bottom: 28px; }
.auth-page .auth-card-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 17px;
  border-radius: 15px;
  background: linear-gradient(140deg,#004168,#022b43);
  color: #fff;
  font: 800 24px/1 "Noto Sans",system-ui,sans-serif;
  box-shadow: 0 9px 18px rgba(0,47,71,.17);
}
.auth-page .auth-card h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 850;
  line-height: 1.45;
  color: #002f47;
}
.auth-page .auth-card-subtitle { margin: 0; color: #667f9b; font-size: 13px; line-height: 1.75; }
.auth-page .auth-card-divider {
  display: block;
  width: 54px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg,#167cf6,#36b8ff);
}
.auth-page .auth-message-list { list-style: none; margin: 0 0 20px; padding: 0; }
.auth-page .auth-message {
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 9px;
  color: #17457c;
  background: #eff6ff;
  font-size: 12px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.auth-page .auth-message--error { background: #fff2f3; color: #9f203d; border-color: #ffbfc9; }
.auth-page .auth-message--success { background: #edfdf5; color: #166446; border-color: #99ead0; }
.auth-page .auth-form { display: grid; gap: 18px; }
.auth-page .auth-field { min-width: 0; }
.auth-page .auth-field-label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.auth-page .auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-page .auth-field-icon {
  position: absolute;
  left: 15px;
  width: 21px;
  height: 21px;
  color: #667f99;
  pointer-events: none;
}
.auth-page .auth-input {
  display: block;
  width: 100%;
  min-height: 51px;
  padding: 11px 48px;
  border: 1px solid #cbd8e6;
  border-radius: 10px;
  background: #fbfdff;
  color: #17324d;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.auth-page .auth-input::placeholder { color: #879ab0; opacity: 1; }
.auth-page .auth-input:hover { border-color: #92abc6; }
.auth-page .auth-input:focus {
  outline: none;
  border-color: #267cdb;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31,129,231,.17);
}
.auth-page .auth-toggle-password {
  position: absolute;
  right: 5px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #557691;
}
.auth-page .auth-toggle-password:hover { background: rgba(55,131,196,.1); color: #1466b9; }
.auth-page .auth-toggle-password svg { width: 20px; height: 20px; }
.auth-page .auth-toggle-password .auth-eye-hidden { display: none; }
.auth-page .auth-toggle-password[aria-pressed="true"] .auth-eye-visible { display: none; }
.auth-page .auth-toggle-password[aria-pressed="true"] .auth-eye-hidden { display: block; }
.auth-page .auth-help {
  margin: -4px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: #677e96;
}
.auth-page .auth-submit {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 1px solid #0e5ace;
  border-radius: 10px;
  padding: 12px 18px;
  background: linear-gradient(110deg, #1876ef 0%, #1254cb 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(18,96,215,.23);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.auth-page .auth-submit svg { width: 19px; height: 19px; }
.auth-page .auth-submit:hover { filter: brightness(1.065); box-shadow: 0 10px 23px rgba(18,96,215,.32); }
.auth-page .auth-submit:active { transform: translateY(1px); }
.auth-page .auth-switch {
  border-top: 1px solid #e1eaf4;
  margin-top: 25px;
  padding-top: 22px;
}
.auth-page .auth-switch-caption {
  display: block;
  text-align: center;
  margin: -30px auto 13px;
  width: 72px;
  background: #fff;
  color: #71879d;
  font-size: 11px;
}
.auth-page .auth-switch-link {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 15px;
  border: 1px solid #dce6f0;
  border-radius: 10px;
  background: #f3f7fc;
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  color: #1d4774 !important;
  text-align: center;
}
.auth-page .auth-switch-link:hover { border-color: #9cbce4; background: #eaf3fc; }
.auth-page .auth-switch-link svg { width: 19px; height: 19px; flex: 0 0 auto; }
.auth-page .auth-support-note {
  margin: 20px 0 0;
  color: #6b8297;
  font-size: 11px;
  text-align: center;
  line-height: 1.8;
}

/* Platform administration uses the same layout system with a deliberately
   darker, higher-contrast form and an explicit privileged-access notice. */
.auth-page--admin .auth-panel { padding-right: clamp(23px, 5vw, 90px); }
.auth-page--admin .auth-card {
  background: linear-gradient(145deg, rgba(18,38,67,.97),rgba(11,28,53,.97));
  border: 1px solid rgba(91,151,210,.36);
  box-shadow: 0 26px 90px rgba(0,6,21,.44), inset 0 1px rgba(229,245,255,.04);
  color: #f3f8ff;
}
.auth-page--admin .auth-card-mark { background: #082a4d; border: 1px solid #9bd5ff; }
.auth-page--admin .auth-card h2 { color: #f6faff; }
.auth-page--admin .auth-card-subtitle { color: #b2c5dc; }
.auth-page--admin .auth-card-divider { background: linear-gradient(90deg,#258cff,#5bc5ff); }
.auth-page--admin .auth-security-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 23px;
  padding: 13px 15px;
  border: 1px solid rgba(59,140,244,.38);
  border-radius: 11px;
  background: rgba(27,103,194,.17);
  color: #e9f4ff;
}
.auth-page--admin .auth-security-note svg { flex: 0 0 auto; width: 29px; height: 29px; color: #58aeff; }
.auth-page--admin .auth-security-note strong { display: block; margin-bottom: 2px; font-size: 12px; }
.auth-page--admin .auth-security-note span { color: #a9c6e7; display: block; font-size: 11px; line-height: 1.6; }
.auth-page--admin .auth-field-label { color: #dae8fa; }
.auth-page--admin .auth-field-icon { color: #a1b8d1; }
.auth-page--admin .auth-input {
  background: #0a1930;
  border: 1px solid #334d70;
  color: #f9fcff;
}
.auth-page--admin .auth-input::placeholder { color: #91a6c2; }
.auth-page--admin .auth-input:hover { border-color: #5985b8; }
.auth-page--admin .auth-input:focus { border-color: #409cfa; background: #08192d; box-shadow: 0 0 0 3px rgba(52,144,246,.23); }
.auth-page--admin .auth-toggle-password { color: #b5c8de; }
.auth-page--admin .auth-toggle-password:hover { color: #fff; background: rgba(73,142,223,.18); }
.auth-page--admin .auth-submit {
  border-color: #3f9fff;
  background: linear-gradient(110deg,#3198ff,#086ce8);
  box-shadow: 0 8px 25px rgba(8,112,232,.26);
}
.auth-page--admin .auth-switch { border-top-color: #314765; }
.auth-page--admin .auth-switch-caption { background: #122642; color: #a6bad4; }
.auth-page--admin .auth-switch-link {
  border-color: #365779;
  background: #172e50;
  color: #e9f5ff !important;
}
.auth-page--admin .auth-switch-link:hover { border-color: #549add; background: #203f68; }
.auth-page--admin .auth-support-note { color: #a5b9d1; }
.auth-page--admin .auth-message { background: #173e65; border-color: #3a6894; color: #e7f6ff; }
.auth-page--admin .auth-message--error { background: #43213a; border-color: #ad5265; color: #ffe7e9; }
.auth-page--admin .auth-message--success { background: #123f39; border-color: #367d6c; color: #dcfff1; }
.auth-page--admin .auth-hero-label { color: #bedfff; }
.auth-page--admin .auth-feature { background: linear-gradient(150deg, rgba(29,76,134,.46),rgba(11,32,64,.5)); }

@media (max-width: 1200px) {
  .auth-page .auth-layout { grid-template-columns: minmax(0,1fr) minmax(370px,.92fr); }
  .auth-page .auth-hero { padding: 30px; }
  .auth-page .auth-hero h1 { font-size: clamp(29px,3.35vw,39px); }
  .auth-page .auth-feature-grid { gap: 8px; }
  .auth-page .auth-feature { min-height: 99px; }
  .auth-page .auth-panel { padding: 26px 26px 26px 12px; }
  .auth-page .auth-card { padding: 30px; }
}
@media (max-width: 920px) {
  .auth-page .auth-layout { grid-template-columns: minmax(0,1fr); }
  .auth-page .auth-hero {
    min-height: auto;
    gap: 16px;
    padding: 28px 24px 18px;
    align-items: center;
    text-align: center;
  }
  .auth-page .auth-hero::before { inset: 0; opacity: .35; }
  .auth-page .auth-brand { align-self: center; }
  .auth-page .auth-brand-name { font-size: 17px; }
  .auth-page .auth-hero-content { margin: 0; padding: 10px 0 0; }
  .auth-page .auth-hero h1 { font-size: clamp(26px,4.5vw,36px); margin: 10px 0 8px; }
  .auth-page .auth-hero-description { margin: 0; font-size: 13px; line-height: 1.65; }
  .auth-page .auth-feature-grid, .auth-page .auth-hero-footnote { display: none; }
  .auth-page .auth-panel { padding: 12px 18px 34px; }
  .auth-page .auth-card { max-width: 530px; }
}
@media (max-width: 480px) {
  .auth-page .auth-hero { padding: 18px 15px 13px; }
  .auth-page .auth-brand-mark { width: 43px; height: 43px; border-radius: 11px; font-size: 17px; }
  .auth-page .auth-brand-name { font-size: 14px; }
  .auth-page .auth-brand-kicker { font-size: 9px; }
  .auth-page .auth-hero-label { font-size: 10px; padding: 6px 10px; }
  .auth-page .auth-hero h1 { font-size: 23px; margin: 9px 0 7px; }
  .auth-page .auth-hero-description { font-size: 11px; }
  .auth-page .auth-panel { padding: 10px 12px 22px; }
  .auth-page .auth-card { padding: 24px 21px; border-radius: 17px; }
  .auth-page .auth-card-top { margin-bottom: 22px; }
  .auth-page .auth-card-mark { width: 47px; height: 47px; font-size: 19px; margin-bottom: 12px; }
  .auth-page .auth-card h2 { font-size: 22px; }
  .auth-page .auth-form { gap: 14px; }
  .auth-page--admin .auth-security-note { padding: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-page *, .auth-page *::before, .auth-page *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Shared Progga brand asset on privileged-login surfaces. */
.auth-page--admin .auth-progga-brand-img { display:block; width:260px; max-width:100%; height:auto; }
.auth-page--admin .auth-progga-card-img { display:block; width:180px; max-width:100%; height:auto; margin:0 auto 16px; }