:root {
  --portal-navy: #081a38;
  --portal-navy-2: #0e2b5b;
  --portal-blue: #1769e0;
  --portal-cyan: #20c7c7;
  --portal-gold: #f2bd43;
  --portal-red: #dc3655;
  --portal-ink: #10213d;
  --portal-muted: #65728a;
  --portal-surface: #ffffff;
  --portal-soft: #f3f7fd;
  --portal-line: #dce5f2;
  --portal-shadow: 0 28px 70px rgba(8, 30, 67, 0.16);
}

body.admissions-portal {
  min-height: 100vh;
  color: var(--portal-ink);
  background:
    radial-gradient(circle at 9% 4%, rgba(32, 199, 199, 0.17), transparent 29%),
    radial-gradient(circle at 93% 8%, rgba(242, 189, 67, 0.18), transparent 24%),
    linear-gradient(180deg, #edf5ff 0%, #f8fbff 44%, #eef4fb 100%);
}

.admission-portal-main {
  position: relative;
  overflow: hidden;
  padding: 34px 22px 58px;
}

.admission-portal-main::before,
.admission-portal-main::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(4px);
}

.admission-portal-main::before {
  width: 420px;
  height: 420px;
  top: 24px;
  left: -250px;
  background: rgba(23, 105, 224, 0.08);
}

.admission-portal-main::after {
  width: 360px;
  height: 360px;
  right: -220px;
  bottom: 160px;
  background: rgba(32, 199, 199, 0.10);
}

.portal-container {
  position: relative;
  z-index: 1;
  width: min(1380px, 100%);
  margin: 0 auto;
}

.portal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(390px, 0.82fr);
  min-height: 570px;
  overflow: hidden;
  border: 1px solid rgba(16, 33, 61, 0.08);
  border-radius: 34px;
  background: var(--portal-surface);
  box-shadow: var(--portal-shadow);
}

.portal-intro {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 570px;
  padding: clamp(34px, 5vw, 70px);
  color: #ffffff;
  background:
    radial-gradient(circle at 87% 12%, rgba(32, 199, 199, 0.35), transparent 31%),
    radial-gradient(circle at 12% 86%, rgba(242, 189, 67, 0.22), transparent 29%),
    linear-gradient(138deg, var(--portal-navy) 0%, var(--portal-navy-2) 58%, #124985 100%);
}

.portal-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom right, #000, transparent 82%);
}

.portal-intro::after {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  right: -165px;
  bottom: -170px;
  z-index: -1;
  border: 62px solid rgba(255,255,255,.06);
  border-radius: 50%;
}

.portal-school-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
}

.portal-school-logo {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  object-fit: contain;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 24px;
  background: rgba(255,255,255,.12);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.portal-school-name {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 29px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: .02em;
}

.portal-school-motto {
  margin: 7px 0 0;
  color: rgba(255,255,255,.73);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.portal-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: clamp(40px, 7vh, 74px) 0 20px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.portal-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #55e5a7;
  box-shadow: 0 0 0 6px rgba(85,229,167,.12);
}

.portal-intro h1 {
  max-width: 720px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(43px, 5.7vw, 76px);
  line-height: .99;
  letter-spacing: -.035em;
}

.portal-intro-copy {
  max-width: 620px;
  margin: 23px 0 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.72;
}

.portal-closing-note {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: 25px;
  padding: 12px 16px;
  border-left: 3px solid var(--portal-gold);
  border-radius: 0 14px 14px 0;
  background: rgba(0,0,0,.16);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.portal-trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 38px;
}

.portal-trust-item {
  min-height: 90px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

.portal-trust-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 11px;
  border-radius: 11px;
  background: rgba(255,255,255,.14);
}

.portal-trust-icon svg {
  width: 18px;
  height: 18px;
  stroke: #ffffff;
}

.portal-trust-item strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.portal-trust-item span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  line-height: 1.35;
}

.portal-login-panel {
  display: flex;
  align-items: center;
  padding: clamp(30px, 4vw, 58px);
  background:
    radial-gradient(circle at 85% 9%, rgba(23,105,224,.08), transparent 30%),
    #ffffff;
}

.portal-login-content {
  width: min(100%, 480px);
  margin: 0 auto;
}

.portal-login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--portal-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.portal-login-kicker svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

.portal-login-title {
  margin: 13px 0 8px;
  color: var(--portal-ink);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.portal-login-subtitle {
  margin: 0 0 29px;
  color: var(--portal-muted);
  font-size: 14px;
  line-height: 1.65;
}

.portal-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 17px;
  padding: 13px 15px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.portal-alert svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.portal-alert.error {
  color: #9f1239;
  border: 1px solid #fecdd3;
  background: #fff1f3;
}

.portal-alert.notice {
  color: #17458a;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
}

.portal-login-form label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--portal-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.portal-index-counter {
  color: var(--portal-muted);
  font-variant-numeric: tabular-nums;
}

.portal-input-wrap {
  position: relative;
}

.portal-input-prefix {
  position: absolute;
  top: 50%;
  left: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  border-radius: 13px;
  color: var(--portal-blue);
  background: #eaf2ff;
}

.portal-input-prefix svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
}

.portal-index-input {
  width: 100%;
  height: 68px;
  padding: 0 56px 0 70px;
  border: 2px solid var(--portal-line);
  border-radius: 20px;
  outline: none;
  color: var(--portal-ink);
  background: #fbfdff;
  font-size: clamp(19px, 2.3vw, 24px);
  font-weight: 900;
  letter-spacing: .20em;
  text-align: left;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.portal-index-input::placeholder {
  color: #a9b4c5;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.portal-index-input:focus {
  border-color: var(--portal-blue);
  background: #ffffff;
  box-shadow: 0 0 0 5px rgba(23,105,224,.11);
}

.portal-input-check {
  position: absolute;
  top: 50%;
  right: 17px;
  display: none;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #20a46b;
}

.portal-input-check.visible {
  display: grid;
}

.portal-input-check svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 3;
}

.portal-index-help {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 11px 2px 0;
  color: var(--portal-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.portal-index-help svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
  stroke: currentColor;
}

.portal-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  margin-top: 20px;
  border: 0;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--portal-blue), #0f55bf);
  box-shadow: 0 16px 30px rgba(23,105,224,.24);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.portal-login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px rgba(23,105,224,.31);
  filter: saturate(1.08);
}

.portal-login-button:active {
  transform: translateY(0);
}

.portal-login-button svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
}

.portal-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--portal-muted);
  font-size: 11px;
  font-weight: 800;
}

.portal-security-note svg {
  width: 15px;
  height: 15px;
  stroke: #20a46b;
}

.portal-support-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.1fr .85fr;
  gap: 18px;
  margin-top: 20px;
}

.portal-info-card {
  position: relative;
  min-width: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--portal-line);
  border-radius: 25px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 16px 42px rgba(8,30,67,.09);
  backdrop-filter: blur(10px);
}

.portal-info-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--portal-blue), var(--portal-cyan), var(--portal-gold));
}

.portal-info-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 17px;
}

.portal-info-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  border-radius: 14px;
  color: var(--portal-blue);
  background: #eaf2ff;
}

.portal-info-icon.teal {
  color: #087d7d;
  background: #e3fbf8;
}

.portal-info-icon.gold {
  color: #9a6900;
  background: #fff5d8;
}

.portal-info-icon svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
}

.portal-info-card h2 {
  margin: 0;
  color: var(--portal-ink);
  font-size: 18px;
  line-height: 1.2;
}

.portal-info-card .portal-card-subtitle {
  margin: 4px 0 0;
  color: var(--portal-muted);
  font-size: 12px;
  line-height: 1.4;
}

.portal-house-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.portal-house-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 39px;
  padding: 8px 12px;
  border: 1px solid #d8e4f4;
  border-radius: 12px;
  color: var(--portal-ink);
  background: #f8fbff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.portal-house-button:hover {
  transform: translateY(-1px);
  border-color: #9fc0ed;
  background: #edf5ff;
}

.portal-house-button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--portal-cyan);
  box-shadow: 0 0 0 4px rgba(32,199,199,.10);
}

.portal-empty {
  color: var(--portal-muted);
  font-size: 13px;
  font-weight: 700;
}

.portal-step-list {
  display: grid;
  gap: 11px;
}

.portal-step {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  gap: 11px;
  align-items: start;
}

.portal-step-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--portal-blue), var(--portal-cyan));
  font-size: 12px;
  font-weight: 900;
}

.portal-step-text {
  padding-top: 5px;
  color: #35435b;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.48;
}

.portal-contact-list {
  display: grid;
  gap: 9px;
}

.portal-contact-item,
.portal-vendor-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #e2e9f3;
  border-radius: 14px;
  background: #f8fbff;
}

.portal-contact-avatar,
.portal-vendor-image {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 12px;
  color: var(--portal-blue);
  background: #eaf2ff;
  font-size: 13px;
  font-weight: 900;
}

.portal-vendor-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portal-contact-copy,
.portal-vendor-copy {
  min-width: 0;
}

.portal-contact-copy strong,
.portal-vendor-copy strong {
  display: block;
  overflow: hidden;
  color: var(--portal-ink);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-contact-copy span,
.portal-vendor-copy span {
  display: block;
  margin-top: 3px;
  color: var(--portal-muted);
  font-size: 11px;
  font-weight: 750;
}

.portal-vendor-heading {
  margin: 18px 0 9px;
  color: var(--portal-ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.portal-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 12, 27, .82);
  backdrop-filter: blur(8px);
}

.portal-modal.show {
  display: flex;
}

.portal-modal-content {
  position: relative;
  width: min(820px, 100%);
  padding: 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

.portal-modal-content img {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 18px;
}

.portal-modal-close {
  position: absolute;
  top: -13px;
  right: -13px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  background: var(--portal-red);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

@media (max-width: 1120px) {
  .portal-hero {
    grid-template-columns: 1fr 420px;
  }
  .portal-support-grid {
    grid-template-columns: 1fr 1fr;
  }
  .portal-info-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .admission-portal-main {
    padding: 20px 14px 42px;
  }
  .portal-hero {
    grid-template-columns: 1fr;
    border-radius: 26px;
  }
  .portal-intro {
    min-height: auto;
    padding: 34px 28px;
  }
  .portal-intro h1 {
    max-width: 650px;
    font-size: clamp(40px, 8vw, 62px);
  }
  .portal-login-panel {
    padding: 35px 28px 40px;
  }
  .portal-login-content {
    width: 100%;
    max-width: 590px;
  }
}

@media (max-width: 700px) {
  .portal-support-grid {
    grid-template-columns: 1fr;
  }
  .portal-info-card:last-child {
    grid-column: auto;
  }
  .portal-trust-row {
    grid-template-columns: 1fr;
  }
  .portal-trust-item {
    min-height: auto;
  }
  .portal-school-logo {
    width: 70px;
    height: 70px;
    border-radius: 20px;
  }
  .portal-school-name {
    font-size: 19px;
  }
}

@media (max-width: 470px) {
  .admission-portal-main {
    padding: 12px 9px 34px;
  }
  .portal-hero {
    border-radius: 22px;
  }
  .portal-intro {
    padding: 27px 21px 30px;
  }
  .portal-school-lockup {
    gap: 12px;
  }
  .portal-school-logo {
    width: 62px;
    height: 62px;
    padding: 6px;
    border-radius: 17px;
  }
  .portal-school-name {
    font-size: 16px;
  }
  .portal-school-motto {
    font-size: 9px;
  }
  .portal-status {
    margin-top: 34px;
  }
  .portal-intro h1 {
    font-size: 42px;
  }
  .portal-intro-copy {
    font-size: 14px;
  }
  .portal-trust-row {
    margin-top: 26px;
  }
  .portal-login-panel {
    padding: 29px 20px 34px;
  }
  .portal-login-title {
    font-size: 32px;
  }
  .portal-index-input {
    height: 64px;
    padding-left: 62px;
    padding-right: 46px;
    font-size: 19px;
    letter-spacing: .12em;
  }
  .portal-input-prefix {
    left: 11px;
  }
  .portal-info-card {
    padding: 20px;
    border-radius: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-login-button,
  .portal-house-button,
  .portal-index-input {
    transition: none;
  }
}

/* 2026 premium admission portal refresh */
body.admissions-portal {
  --portal-navy: #071a3d;
  --portal-navy-2: #0b3475;
  --portal-blue: #145ce6;
  --portal-cyan: #13b7c8;
  --portal-gold: #eeb638;
  --portal-ink: #0b1f42;
  --portal-muted: #68758d;
  --portal-soft: #f4f7fb;
  --portal-line: #dbe5f2;
  background: linear-gradient(180deg, #edf4fc 0%, #f8fbff 46%, #eef3f9 100%);
}

.admission-portal-main {
  padding: 30px 20px 64px;
}

.portal-container {
  width: min(1440px, 100%);
}

.portal-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  min-height: 640px;
  border: 0;
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(7, 26, 61, .18);
}

.portal-intro {
  min-height: 640px;
  padding: clamp(34px, 4.8vw, 70px);
  background:
    linear-gradient(110deg, rgba(5, 24, 57, .96) 0%, rgba(6, 35, 80, .88) 53%, rgba(9, 56, 115, .66) 100%),
    url('../../uploads/admissions/1767833610_20260106_120335.jpg') center/cover no-repeat;
}

.portal-intro::before {
  opacity: .16;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.24) 0 1px, transparent 1.6px),
    radial-gradient(circle at 80% 55%, rgba(255,255,255,.18) 0 1px, transparent 1.6px);
  background-size: 34px 34px, 44px 44px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}

.portal-intro::after {
  width: 470px;
  height: 470px;
  right: -260px;
  bottom: -285px;
  border: 72px solid rgba(238,182,56,.13);
}

.portal-school-logo {
  width: 96px;
  height: 96px;
  padding: 10px;
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 42px rgba(0,0,0,.25);
}

.portal-school-name {
  font-size: clamp(22px, 2.5vw, 32px);
  letter-spacing: .01em;
}

.portal-school-motto {
  color: #f7c958;
  font-size: 12px;
}

.portal-status {
  margin-top: clamp(38px, 7vh, 76px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.13);
  box-shadow: inset 0 1px rgba(255,255,255,.1);
}

.portal-intro h1 {
  max-width: 700px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(48px, 5.6vw, 78px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.portal-intro-copy {
  max-width: 650px;
  color: rgba(255,255,255,.83);
  font-size: clamp(15px, 1.45vw, 18px);
}

.portal-closing-note {
  padding: 13px 17px;
  border-left-width: 4px;
  background: rgba(4, 17, 42, .5);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}

.portal-trust-row {
  gap: 14px;
}

.portal-trust-item {
  min-height: 112px;
  padding: 17px;
  border-color: rgba(255,255,255,.17);
  background: rgba(255,255,255,.11);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

.portal-trust-item strong {
  font-size: 13px;
}

.portal-trust-item span {
  color: rgba(255,255,255,.72);
  font-size: 11.5px;
}

.portal-login-panel {
  position: relative;
  padding: clamp(32px, 4.5vw, 68px);
  background:
    radial-gradient(circle at 100% 0%, rgba(20,92,230,.11), transparent 31%),
    radial-gradient(circle at 0% 100%, rgba(19,183,200,.08), transparent 28%),
    #fff;
}

.portal-login-panel::before {
  content: "";
  position: absolute;
  inset: 20px;
  pointer-events: none;
  border: 1px solid rgba(20,92,230,.08);
  border-radius: 24px;
}

.portal-login-content {
  position: relative;
  z-index: 1;
  width: min(100%, 500px);
  padding: clamp(26px, 3vw, 42px);
  border: 1px solid rgba(13, 44, 94, .08);
  border-radius: 26px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 20px 55px rgba(7,31,75,.11);
  backdrop-filter: blur(12px);
}

.portal-login-kicker {
  padding: 8px 11px;
  border-radius: 999px;
  background: #eaf2ff;
}

.portal-login-title {
  margin-top: 18px;
  font-size: clamp(32px, 3.2vw, 46px);
  font-weight: 900;
}

.portal-login-subtitle {
  margin-bottom: 28px;
}

.portal-index-input {
  min-height: 62px;
  border: 1px solid #cfdced;
  border-radius: 16px;
  background: #f9fbfe;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .14em;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.portal-index-input:focus {
  border-color: var(--portal-blue);
  background: #fff;
  box-shadow: 0 0 0 5px rgba(20,92,230,.11);
}

.portal-login-button {
  min-height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0d48bd 0%, #1769ea 100%);
  box-shadow: 0 14px 30px rgba(20,92,230,.25);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
}

.portal-login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(20,92,230,.32);
}

.portal-security-note {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--portal-line);
}

.portal-support-grid {
  gap: 20px;
  margin-top: 24px;
}

.portal-info-card {
  border: 1px solid rgba(11,31,66,.07);
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 42px rgba(7,31,75,.08);
  transition: transform .22s ease, box-shadow .22s ease;
}

.portal-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 23px 50px rgba(7,31,75,.12);
}

.portal-info-icon {
  box-shadow: 0 10px 24px rgba(20,92,230,.12);
}

.portal-house-button {
  border-radius: 12px;
  background: #f2f6fc;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.portal-house-button:hover {
  color: #fff;
  background: var(--portal-blue);
  transform: translateY(-1px);
}

@media (max-width: 1060px) {
  .portal-hero {
    grid-template-columns: 1fr;
  }
  .portal-intro,
  .portal-hero {
    min-height: auto;
  }
  .portal-login-panel {
    padding: 28px;
  }
  .portal-login-panel::before {
    inset: 12px;
  }
}

@media (max-width: 720px) {
  .admission-portal-main {
    padding: 16px 12px 38px;
  }
  .portal-hero {
    border-radius: 22px;
  }
  .portal-intro {
    padding: 28px 22px 30px;
    background:
      linear-gradient(150deg, rgba(5,24,57,.97), rgba(6,45,98,.9)),
      url('../../uploads/admissions/1767833610_20260106_120335.jpg') center/cover no-repeat;
  }
  .portal-school-lockup {
    align-items: flex-start;
  }
  .portal-school-logo {
    width: 70px;
    height: 70px;
    border-radius: 20px;
  }
  .portal-status {
    margin-top: 30px;
  }
  .portal-intro h1 {
    font-size: clamp(38px, 12vw, 55px);
  }
  .portal-trust-row {
    grid-template-columns: 1fr;
  }
  .portal-trust-item {
    min-height: 0;
  }
  .portal-login-panel {
    padding: 20px 14px 26px;
  }
  .portal-login-content {
    padding: 25px 19px;
    border-radius: 20px;
  }
  .portal-index-input {
    font-size: 17px;
    letter-spacing: .09em;
  }
}

/* 2026-07-02: compact house/process cards and contact panel under login */
.portal-quick-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:24px;
}
.portal-quick-card{
  min-width:0;
  padding:18px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
}
.portal-quick-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px}
.portal-quick-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.16);color:#fff}
.portal-quick-icon svg{width:21px;height:21px;stroke:currentColor}
.portal-quick-card h2{margin:0 0 4px;color:#fff;font-size:16px;line-height:1.15;text-transform:uppercase}
.portal-quick-card p{margin:0;color:rgba(255,255,255,.78);font-size:12px;line-height:1.45}
.portal-house-list-compact{display:flex;flex-wrap:wrap;gap:8px}
.portal-house-list-compact .portal-house-button{padding:8px 11px;font-size:11px;border-radius:10px}
.portal-step-list-compact{display:grid;gap:7px}
.portal-step-list-compact .portal-step{padding:7px 9px;gap:8px;border-radius:10px}
.portal-step-list-compact .portal-step-number{width:24px;height:24px;flex-basis:24px;font-size:11px}
.portal-step-list-compact .portal-step-text{font-size:11px;line-height:1.35}
.portal-login-panel{align-content:start}
.portal-login-more-info{
  width:min(100%,470px);
  margin:18px auto 0;
  padding:18px;
  border:1px solid #dbe7f7;
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,40,75,.10);
}
.portal-more-info-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px}
.portal-more-info-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:13px;background:#fff3d8;color:#c67a00}
.portal-more-info-icon svg{width:21px;height:21px;stroke:currentColor}
.portal-more-info-head h2{margin:0 0 4px;color:#10264b;font-size:16px;line-height:1.2;text-transform:uppercase}
.portal-more-info-head p{margin:0;color:#66758f;font-size:12px;line-height:1.4}
.portal-more-info-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.portal-more-info-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid #e3ebf6;border-radius:12px;background:#f8fbff;min-width:0}
.portal-more-info-item>div{min-width:0;display:grid;gap:2px}
.portal-more-info-item strong{font-size:12px;color:#14294c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portal-more-info-item span{font-size:11px;color:#63728a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portal-login-more-info .portal-vendor-heading{margin:14px 0 8px;font-size:11px;line-height:1.4;color:#33496a}
@media(max-width:1100px){
  .portal-quick-grid{grid-template-columns:1fr}
  .portal-more-info-list{grid-template-columns:1fr}
}
@media(max-width:760px){
  .portal-quick-grid{margin-top:18px;gap:10px}
  .portal-quick-card{padding:14px}
  .portal-login-more-info{margin-top:12px;padding:14px}
}