/* ==========================================================================
   INSTITUTION PORTAL SHELL — same defect classes as Student/Partner 2026-08-12
   Scoped to body.institution-portal-page. Does not redesign student hub chrome.
   ========================================================================== */

/* Campus shell — left sidebar (admin workspace feel: dark + gold).
   One nav. No pill row. No More tools mega-menu. */
:root {
  --inst-sidebar-width: 278px;
}

body.institution-portal-page:not(.su-auth-page) .su-page.inst-shell-page {
  overflow: visible;
  padding: 0 0 2.5rem;
}

.inst-frame {
  display: grid;
  grid-template-columns: var(--inst-sidebar-width) minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - var(--q-header-offset, 96px));
}

.inst-sidebar {
  position: sticky;
  top: var(--q-header-offset, 96px);
  z-index: 36;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--q-header-offset, 96px));
  color: #f6f1e6;
  background:
    radial-gradient(circle at 20% 0%, rgba(230, 202, 139, 0.14), transparent 18rem),
    linear-gradient(180deg, #071421 0%, #091827 55%, #06111d 100%);
  border-right: 1px solid rgba(230, 202, 139, 0.13);
  box-shadow: 16px 0 45px rgba(4, 12, 20, 0.08);
}

.inst-sidebar-brand {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.inst-sidebar-brand-copy small,
.inst-sidebar-brand-copy strong {
  display: block;
}

.inst-sidebar-brand-copy small {
  color: rgba(246, 241, 230, 0.52);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.inst-sidebar-brand-copy strong {
  margin-top: 3px;
  color: #f0d58a;
  font-size: 0.95rem;
}

.inst-sidebar-close {
  display: none;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.inst-side-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding: 12px 12px 24px;
}

.inst-side-group {
  margin: 0;
}

.inst-side-group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin: 8px 6px 4px;
  color: rgba(246, 241, 230, 0.48);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.inst-side-group > summary::-webkit-details-marker {
  display: none;
}

.inst-side-group > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}

.inst-side-group[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.inst-side-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inst-side-nav a {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  color: rgba(246, 241, 230, 0.76);
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none !important;
  white-space: nowrap;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.inst-side-nav a:hover,
.inst-side-nav a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  outline: none;
}

.inst-side-nav a.is-active,
.inst-side-nav a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(90deg, rgba(200, 164, 93, 0.2), rgba(200, 164, 93, 0.07));
  border-color: rgba(230, 202, 139, 0.24);
  box-shadow: inset 3px 0 0 #c8a45d;
}

.inst-side-icon {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  color: #e6ca8b;
  background: rgba(255, 255, 255, 0.055);
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 900;
}

.inst-main {
  min-width: 0;
  padding-top: 1.25rem;
}

.inst-sidebar-overlay {
  display: none;
}

/* Top bar: Home + Back only. Hide competing public/portal pills and More
   tools — but ONLY inside the signed-in portal shell, which supplies its
   own navigation.

   The body class is on the PUBLIC institution pages too (Placement
   Readiness, Request access, Campus seats), and those have no sidebar to
   navigate with. Hiding it there left them with no menu at all: the
   owner reported on 17 Aug 2026 that the main menu disappears from three
   of the four Institutions submenu items, and that the fourth — Staff
   sign in — still works. It works because it is the one page carrying
   .su-auth-page, which this selector already excluded.

   The condition is now "a portal shell is present", meaning there is
   something else to navigate with. Never hide the only navigation on a
   page. */
body.institution-portal-page:not(.su-auth-page):has(.inst-shell-page) #site-navigation {
  display: none !important;
}

.inst-header-utils {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}

.inst-header-keep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 240, 230, 0.92);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
}

.inst-header-keep:hover,
.inst-header-keep:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fffef8;
  outline: none;
}

/* Legacy hyperlink strip — hide when premium shell is present */
body.institution-portal-page .su-portal-nav {
  display: none;
}

/* Logo: never invert the gold-on-black brand asset into a white box */
body.institution-portal-page .site-header .brand-logo {
  filter: none !important;
  mix-blend-mode: lighten;
  opacity: 1;
  max-height: 40px;
  width: auto;
  height: auto;
  background: transparent;
}

body.institution-portal-page .site-header .header-brand-stack {
  width: auto !important;
  max-width: min(220px, 36vw);
}

body.institution-portal-page .site-header .brand-badge-udyam {
  max-height: 28px;
  width: auto;
  opacity: 0.86;
  mix-blend-mode: lighten;
}

body.institution-portal-page .brand-cluster {
  gap: 14px;
  align-items: center;
}

/* Kill public hyperlink separator dots / underline rails on institution chrome */
body.institution-portal-page:not(.su-auth-page) .site-navigation > a:not(:first-child)::before,
body.institution-portal-page:not(.su-auth-page) .site-navigation > details:not(:first-child) > summary::before,
body.institution-portal-page:not(.su-auth-page) .site-navigation > a::after,
body.institution-portal-page:not(.su-auth-page) .site-navigation a.is-active::after,
body.institution-portal-page:not(.su-auth-page) .site-navigation a[aria-current="page"]::after {
  content: none !important;
  display: none !important;
}

/* Header primary nav — same pill language as Partner (institution-scoped) */
body.institution-portal-page:not(.su-auth-page) .site-navigation {
  gap: 8px;
  align-items: center;
}

body.institution-portal-page:not(.su-auth-page) .site-navigation > a,
body.institution-portal-page:not(.su-auth-page) .site-navigation > details.nav-dropdown {
  position: relative;
  z-index: 1;
  isolation: isolate;
  flex-shrink: 0;
}

body.institution-portal-page:not(.su-auth-page) .site-navigation > details.nav-dropdown[open] {
  z-index: 80;
}

body.institution-portal-page:not(.su-auth-page) .site-navigation > a,
body.institution-portal-page:not(.su-auth-page) .site-navigation > details > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A pill sizes to its own label. The sidebar restructure dropped
     these, which let a two-word label like "Packages & Seats" break
     mid-label on a narrow header — the label-integrity contract the
     15 Aug QC batch pins. */
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  min-width: max-content;
  flex: 0 0 auto;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 240, 230, 0.9) !important;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: none;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

body.institution-portal-page:not(.su-auth-page) .site-navigation > a:hover,
body.institution-portal-page:not(.su-auth-page) .site-navigation > a:focus-visible,
body.institution-portal-page:not(.su-auth-page) .site-navigation > details > summary:hover,
body.institution-portal-page:not(.su-auth-page) .site-navigation > details > summary:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fffef8 !important;
}

body.institution-portal-page:not(.su-auth-page) .site-navigation > a.is-active,
body.institution-portal-page:not(.su-auth-page) .site-navigation > a[aria-current="page"],
body.institution-portal-page:not(.su-auth-page) .site-navigation > details.is-active > summary,
body.institution-portal-page:not(.su-auth-page) .site-navigation > details[open] > summary {
  background: linear-gradient(
    135deg,
    rgba(240, 213, 138, 0.22),
    rgba(201, 162, 39, 0.1)
  );
  border-color: rgba(214, 178, 94, 0.45);
  color: #f0d58a !important;
}

/* Real card surfaces + padding (not flush transparent strips) */
body.institution-portal-page .su-status-card,
body.institution-portal-page .su-form-card {
  background:
    linear-gradient(
      145deg,
      rgba(14, 28, 54, 0.88),
      rgba(8, 20, 40, 0.94)
    );
  padding: clamp(1.15rem, 2.4vw, 1.55rem);
  border: 1px solid rgba(214, 178, 94, 0.18);
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
}

/* Gold primary + outline secondary CTAs (visible under data-qa11y-theme) */
body.institution-portal-page .button-gold,
body.institution-portal-page .button.button-gold,
body.institution-portal-page .su-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(145deg, #f0d58a, #d6b25e);
  color: #07101f !important;
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: 0 16px 35px rgba(214, 178, 94, 0.16);
  cursor: pointer;
}

body.institution-portal-page .button-outline,
body.institution-portal-page .button.button-outline,
body.institution-portal-page a.button.button-outline,
html[data-qa11y-theme] body.institution-portal-page .button-outline,
html[data-qa11y-theme] body.institution-portal-page .button.button-outline,
html[data-qa11y-theme] body.institution-portal-page a.button.button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  background: rgba(14, 28, 54, 0.72);
  color: #f4f0e6 !important;
  border: 1px solid rgba(201, 162, 39, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-decoration: none !important;
  font-weight: 700;
  cursor: pointer;
}

body.institution-portal-page .button-outline:hover,
body.institution-portal-page .button-outline:focus-visible,
html[data-qa11y-theme] body.institution-portal-page .button-outline:hover,
html[data-qa11y-theme] body.institution-portal-page .button-outline:focus-visible {
  background: rgba(201, 162, 39, 0.14);
  border-color: rgba(201, 162, 39, 0.75);
  color: #f0d58a !important;
}

/* Form fields elevated on dark cards; select chevron beats .q-select/.form-control */
body.institution-portal-page .su-intake-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.institution-portal-page .su-intake-form select,
body.institution-portal-page .su-intake-form textarea,
body.institution-portal-page .su-intake-form input.form-control:not([type="checkbox"]):not([type="radio"]),
body.institution-portal-page .su-intake-form input.q-input:not([type="checkbox"]):not([type="radio"]),
body.institution-portal-page .su-intake-form select.form-control,
body.institution-portal-page .su-intake-form select.q-select,
body.institution-portal-page .su-intake-form .q-select,
body.institution-portal-page .su-intake-form .q-textarea,
body.institution-portal-page .su-inline-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.institution-portal-page .su-inline-form select,
body.institution-portal-page .su-inline-form textarea,
body.institution-portal-page .su-inline-form select.form-control,
body.institution-portal-page .su-inline-form select.q-select,
body.institution-portal-page .su-inline-form .q-select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid rgba(201, 162, 39, 0.45);
  border-radius: 12px;
  outline: none;
  background: rgba(8, 18, 36, 0.96);
  color: #f4f0e6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(214, 178, 94, 0.04);
  font: inherit;
  font-weight: 500;
  line-height: 1.35;
}

body.institution-portal-page .su-intake-form select,
body.institution-portal-page .su-intake-form select.form-control,
body.institution-portal-page .su-intake-form select.q-select,
body.institution-portal-page .su-intake-form .q-select,
body.institution-portal-page .su-inline-form select,
body.institution-portal-page .su-inline-form select.form-control,
body.institution-portal-page .su-inline-form select.q-select,
body.institution-portal-page .su-inline-form .q-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 12px 2.6rem 12px 14px !important;
  cursor: pointer;
  background-color: rgba(8, 18, 36, 0.96);
  background-image:
    linear-gradient(45deg, transparent 50%, #f0d58a 50%),
    linear-gradient(135deg, #f0d58a 50%, transparent 50%),
    linear-gradient(
      180deg,
      rgba(201, 162, 39, 0.12),
      rgba(201, 162, 39, 0.04)
    ) !important;
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px),
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  border-color: rgba(201, 162, 39, 0.55);
}

/* Checkboxes/radios must not get full-width field chrome */
body.institution-portal-page .su-intake-form input[type="checkbox"],
body.institution-portal-page .su-intake-form input[type="radio"],
body.institution-portal-page .su-intake-form input.q-checkbox[type="checkbox"],
body.institution-portal-page .su-intake-form input.form-control[type="checkbox"],
body.institution-portal-page .su-intake-form input.q-input[type="checkbox"],
body.institution-portal-page .su-inline-form input[type="checkbox"],
body.institution-portal-page .su-inline-form input[type="radio"] {
  width: 19px;
  height: 19px;
  min-height: 0;
  margin: 2px 8px 0 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  accent-color: #d6b25e;
  vertical-align: top;
}

html[data-qa11y-theme] body.institution-portal-page .su-intake-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-qa11y-theme] body.institution-portal-page .su-intake-form select,
html[data-qa11y-theme] body.institution-portal-page .su-intake-form textarea,
html[data-qa11y-theme] body.institution-portal-page .su-inline-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-qa11y-theme] body.institution-portal-page .su-inline-form select,
html[data-qa11y-theme] body.institution-portal-page .su-inline-form textarea {
  background: rgba(8, 18, 36, 0.96);
  color: #f4f0e6;
  border: 1.5px solid rgba(201, 162, 39, 0.55);
}

@media (max-width: 720px) {
  body.institution-portal-page .button,
  body.institution-portal-page .su-submit {
    min-height: 48px;
  }

  body.institution-portal-page .su-page {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* Public Institutions surfaces (/students/institutions/, request, packages)
   share the same chrome; keep journey rails / product shots readable. */
body.institution-portal-page .journey-stepper {
  margin: 1.5rem 0 2rem;
  padding: 0.85rem 0.2rem;
  border-top: 1px solid rgba(214, 178, 94, 0.18);
  border-bottom: 1px solid rgba(214, 178, 94, 0.18);
}

body.institution-portal-page .journey-stepper a {
  color: rgba(244, 240, 230, 0.9);
  text-decoration: none;
}

body.institution-portal-page .journey-stepper a:hover,
body.institution-portal-page .journey-stepper a:focus-visible {
  color: #f0d58a;
}

body.institution-portal-page .product-shot-frame {
  border: 1px solid rgba(214, 178, 94, 0.22);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(14, 28, 54, 0.88);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
}

body.institution-portal-page .su-bulk-package-card {
  background:
    linear-gradient(
      145deg,
      rgba(14, 28, 54, 0.88),
      rgba(8, 20, 40, 0.94)
    );
  padding: clamp(1.15rem, 2.4vw, 1.55rem);
  border: 1px solid rgba(214, 178, 94, 0.18);
  border-radius: 18px;
}

/* Login secondary auth stack — same look as Partner pn-auth-note */
body.institution-portal-page .su-auth-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: 1rem;
  min-height: 48px;
}

body.institution-portal-page .su-auth-stack {
  margin-top: 0.35rem;
}

body.institution-portal-page .su-auth-note {
  margin: 0.85rem 0 0;
  color: #9aa8bf;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

body.institution-portal-page .su-auth-note a {
  color: #f0d58a !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.institution-portal-page .su-auth-note a:hover,
body.institution-portal-page .su-auth-note a:focus-visible {
  color: #fffef8 !important;
  text-decoration: underline !important;
}

body.institution-portal-page .inst-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}

body.institution-portal-page .inst-board__column {
  min-width: 0;
}

body.institution-portal-page .inst-board__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

body.institution-portal-page .inst-board__head h2 {
  margin: 0;
  font-size: 1rem;
}

body.institution-portal-page .inst-board .su-status-card + .su-status-card {
  margin-top: 0.75rem;
}

@media (max-width: 720px) {
  body.institution-portal-page .inst-board {
    grid-template-columns: 1fr;
  }
}

.inst-match-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 0 1rem;
}

.inst-match-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
}

.inst-match-filters button {
  min-height: 44px;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #f4f0e6;
  font-weight: 650;
  cursor: pointer;
}

.inst-match-filters button.is-active {
  border-color: rgba(214, 178, 94, 0.5);
  background: linear-gradient(135deg, rgba(240, 213, 138, 0.28), rgba(201, 162, 39, 0.12));
  color: #f0d58a;
}

.inst-match-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.inst-match-column {
  min-width: 0;
  padding: 0.85rem;
  border-radius: 18px;
  border: 1px solid rgba(214, 178, 94, 0.16);
  background: rgba(8, 20, 40, 0.45);
}

.inst-match-column__head h2 {
  margin: 0;
  color: #f0d58a;
  font-size: 1.05rem;
}

.inst-match-column__head span {
  color: #fffef8;
  font-weight: 700;
}

.inst-match-column__head p {
  margin: 0.35rem 0 0.85rem;
  color: rgba(244, 240, 230, 0.78);
  font-size: 0.85rem;
}

.inst-match-card {
  margin: 0 0 0.75rem;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(160deg, rgba(14, 28, 54, 0.96), rgba(8, 18, 36, 0.98));
  color: #f4f0e6;
  cursor: pointer;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
}

[data-campus-match].is-animated .inst-match-card {
  animation: inst-match-fly 0.55s ease forwards;
  animation-delay: calc(var(--delay, 0) * 70ms);
}

[data-campus-match].is-static .inst-match-card,
@media (prefers-reduced-motion: reduce) {
  .inst-match-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@keyframes inst-match-fly {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.inst-match-card.is-ready {
  border-color: rgba(214, 178, 94, 0.45);
  box-shadow: 0 0 0 1px rgba(214, 178, 94, 0.12);
}

.inst-match-card.is-selected {
  border-color: #f0d58a;
  box-shadow:
    0 0 0 2px rgba(240, 213, 138, 0.35),
    0 18px 40px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

.inst-match-card__top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: flex-start;
}

.inst-match-card h3 {
  margin: 0;
  font-size: 1.02rem;
}

.inst-match-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: #f0d58a;
  color: #07101f;
  font-size: 0.72rem;
  font-weight: 800;
}

.inst-match-rec {
  margin: 0.4rem 0 0.65rem;
  color: #f0d58a;
  font-weight: 650;
}

.inst-match-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.inst-match-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #c9a227, #f0d58a);
}

[data-campus-match].is-animated .inst-match-bar__fill {
  animation: inst-match-bar 0.7s ease forwards;
  animation-delay: calc(var(--delay, 0) * 70ms + 120ms);
}

[data-campus-match].is-static .inst-match-bar__fill,
@media (prefers-reduced-motion: reduce) {
  .inst-match-bar__fill {
    width: calc(var(--fill, 0) * 1%);
    animation: none;
  }
}

@keyframes inst-match-bar {
  to { width: calc(var(--fill, 0) * 1%); }
}

.inst-match-bar__label,
.inst-match-gap,
.inst-match-why {
  font-size: 0.82rem;
  color: rgba(244, 240, 230, 0.82);
}

.inst-match-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.45rem 0;
  padding: 0;
  list-style: none;
}

.inst-match-chips li {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(214, 178, 94, 0.28);
  color: #f0d58a;
}

.inst-match-why {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.inst-match-pool {
  margin: 0 0 1.5rem;
}

.jd-match-page .su-empty-note,
.jd-match-page .su-status-card {
  color: #f4f0e6;
}

body.institution-portal-page .su-freeze-banner,
body.institution-portal-page .su-tour {
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.35rem;
  border-radius: 16px;
  border: 1px solid rgba(214, 178, 94, 0.45);
  background: rgba(12, 28, 58, 0.72);
}
body.institution-portal-page .su-freeze-banner.is-frozen {
  border-color: #c45c4a;
}
body.institution-portal-page.is-frozen form:not([data-freeze-ok]) {
  display: none;
}
/* Every write CTA lies while frozen if it still looks clickable. Billing
   (pay / invoice) is the allowed unfreeze path; keep that gold live. */
body.institution-portal-page.is-frozen a.button:not([href*="billing"]):not([href*="invoice"]),
body.institution-portal-page.is-frozen .button-gold[href*="add"],
body.institution-portal-page.is-frozen .button-gold[href*="edit"],
body.institution-portal-page.is-frozen .su-submit,
body.institution-portal-page.is-frozen .su-command-card a.button {
  pointer-events: none;
  opacity: 0.4;
}
body.institution-portal-page.is-frozen .su-freeze-banner a.button {
  pointer-events: auto;
  opacity: 1;
}
body.institution-portal-page .su-mode-toggle .button:disabled,
body.institution-portal-page .su-mode-toggle .button[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
}
body.institution-portal-page .su-tour h2,
body.institution-portal-page .su-freeze-banner h2 {
  margin: 0 0 0.4rem;
  font-size: 1.45rem;
  color: #f4f0e6;
}
body.institution-portal-page .su-help-hi {
  color: rgba(240, 213, 138, 0.92);
}
body.institution-portal-page .su-price-headline {
  font-size: 1.85rem;
  font-weight: 700;
  color: #f0d58a;
  margin: 0;
}
body.institution-portal-page .su-price-sub {
  font-size: 0.95rem;
  color: rgba(244, 240, 230, 0.72);
  margin: 0.15rem 0 0.6rem;
}
body.institution-portal-page .su-command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
body.institution-portal-page .su-command-card {
  min-height: 210px;
}
body.institution-portal-page .su-command-card .button {
  margin-top: auto;
}
body.institution-portal-page .su-step-label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0d58a;
  margin: 1rem 0 0.35rem;
}
body.institution-portal-page .su-guided-form .form-control,
body.institution-portal-page .su-guided-form input,
body.institution-portal-page .su-guided-form select,
body.institution-portal-page .su-guided-form textarea {
  min-height: 48px;
  font-size: 1.05rem;
}
body.institution-portal-page .su-empty-sop {
  font-size: 1.15rem;
  line-height: 1.5;
}
body.institution-portal-page .su-attach-block {
  margin: 1.25rem 0 1.5rem;
  padding: 1rem 1.1rem 1.2rem;
  border: 2px solid rgba(214, 178, 94, 0.55);
  border-radius: 16px;
  background: rgba(8, 18, 40, 0.45);
}
body.institution-portal-page .su-attach-drop {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 7.5rem;
  padding: 1.1rem 1.2rem;
  border: 2px dashed #d6b25e;
  border-radius: 14px;
  cursor: pointer;
  font-size: 1.08rem;
}
body.institution-portal-page .su-attach-drop strong {
  font-size: 1.25rem;
  color: #f0d58a;
}
body.institution-portal-page .su-attach-input,
body.institution-portal-page .su-guided-form .su-attach-input {
  min-height: 72px !important;
  font-size: 1.1rem;
  padding-top: 1rem;
}
body.institution-portal-page .su-attach-list {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
}

body.institution-portal-page.is-test-mode::before,
body.student-university-page.is-test-mode::before {
  content: "TEST";
  position: fixed;
  inset: 18% 0 auto;
  text-align: center;
  font-size: 18vw;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(214, 178, 94, 0.12);
  pointer-events: none;
  z-index: 40;
}
body.institution-portal-page .su-mode-banner,
body.institution-portal-page .q-demo-start {
  margin: 0 0 1rem;
}
body.institution-portal-page .su-mode-toggle {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
body.institution-portal-page .su-mode-toggle .button {
  min-height: 56px;
  min-width: 140px;
  font-size: 1.15rem;
}
body.institution-portal-page .su-mode-banner {
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(214, 178, 94, 0.45);
  background: rgba(12, 28, 58, 0.72);
  color: #f4f0e6;
}
.q-demo-start {
  display: inline-flex;
  min-height: 48px;
}
.q-demo-dock {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  max-width: 28rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(214, 178, 94, 0.55);
  background: rgba(8, 18, 40, 0.96);
  color: #f4f0e6;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.q-demo-bubble { margin: 0 0 0.35rem; }
.q-demo-bubble-hi { color: #f0d58a; }
.q-demo-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.q-demo-spotlight {
  outline: 3px solid #d6b25e;
  outline-offset: 6px;
  position: relative;
  z-index: 50;
  box-shadow: 0 0 0 8px rgba(214, 178, 94, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .q-demo-spotlight { box-shadow: none; }
}

@media (max-width: 900px) {
  .inst-match-board {
    grid-template-columns: 1fr;
  }
}

/* Marker comment for visual contract tests */
.inst-shell-v1-premium {
  /* Premium primary nav */
  border-radius: 999px;
}

.inst-shell-v2-sidebar {
  /* Campus left sidebar — one nav, no More tools mega-menu */
}

@media (max-width: 1023.98px) {
  .inst-frame {
    grid-template-columns: minmax(0, 1fr);
  }

  .inst-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    width: min(var(--inst-sidebar-width), 88vw);
    height: 100vh;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }

  body.inst-nav-open .inst-sidebar {
    transform: translateX(0);
  }

  .inst-sidebar-close {
    display: inline-flex;
  }

  body.inst-nav-open .inst-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(4, 10, 20, 0.55);
  }

  body.institution-portal-page:not(.su-auth-page) .nav-toggle {
    display: block;
  }
}
@media (min-width: 2560px) {
  body.institution-portal-page .su-shell {
    max-width: 1680px;
  }
  body.institution-portal-page .inst-board {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 20rem));
    justify-content: start;
  }
}

/* Right-edge tabs — Service Desk + Help/AI. Never two circular FABs. */
body.institution-portal-page:not(.su-auth-page) #guide-launcher,
body.institution-portal-page:not(.su-auth-page) .q-edge-tab {
  position: fixed !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1100;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  width: 36px !important;
  min-width: 36px !important;
  min-height: 112px !important;
  padding: 12px 6px !important;
  border-radius: 10px 0 0 10px !important;
  border: 1px solid rgba(214, 178, 94, 0.4) !important;
  border-right: 0 !important;
  background: linear-gradient(180deg, #10233c, #081527) !important;
  box-shadow: -8px 8px 24px rgba(0, 0, 0, 0.28) !important;
  transform: none !important;
  cursor: grab;
}

body.institution-portal-page:not(.su-auth-page) #guide-launcher .guide-launcher-mark,
body.institution-portal-page:not(.su-auth-page) .q-edge-tab-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 0.62rem;
  font-weight: 800;
  color: #e6ca8b;
}

body.institution-portal-page:not(.su-auth-page) #guide-launcher span,
body.institution-portal-page:not(.su-auth-page) .q-edge-tab-label {
  display: block !important;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  color: #f6f1e6;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
}

body.institution-portal-page:not(.su-auth-page) #guide-launcher small {
  display: none !important;
}

.q-edge-panel {
  position: fixed;
  right: 44px;
  top: 30%;
  z-index: 1110;
  width: min(320px, calc(100vw - 56px));
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(214, 178, 94, 0.35);
  background: rgba(8, 18, 36, 0.98);
  color: #f4f0e6;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.q-edge-panel[hidden] {
  display: none !important;
}

.q-edge-panel p {
  margin: 0 0 0.85rem;
}

.q-edge-panel .button {
  display: inline-flex;
  margin: 0 0.4rem 0.4rem 0;
}

body.institution-portal-page:not(.su-auth-page) .q-audio-mute-dock {
  right: auto;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: 16px;
}

body.institution-portal-page:not(.su-auth-page) .guide-panel {
  right: 44px;
  bottom: 16px;
}

@media (max-width: 1023.98px) {
  body.institution-portal-page:not(.su-auth-page) #guide-launcher,
  body.institution-portal-page:not(.su-auth-page) .q-edge-tab {
    top: auto !important;
    min-height: 96px !important;
  }

  body.institution-portal-page:not(.su-auth-page) .guide-panel,
  .q-edge-panel {
    right: 12px;
    left: 12px;
    width: auto;
    top: calc(var(--q-header-offset, 96px) + 12px);
    bottom: auto;
    max-height: calc(100dvh - var(--q-header-offset, 96px) - 24px);
    overflow: auto;
  }
}