@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.uops-admissions-page {
    --uops-ink: #13242f;
    --uops-muted: #5e6d77;
    --uops-line: #dce7ec;
    --uops-green: #1f6b54;
    --uops-green-soft: #e8f4ef;
    --uops-gold: #b98218;
    --uops-blue: #1769aa;
    --uops-danger: #a33c2b;
    color: var(--uops-ink);
    padding: 1.75rem 0 3.5rem;
    background: linear-gradient(180deg, #f7fbfa 0%, #ffffff 42%, #f8fbfc 100%);
}

.uops-admissions-page * {
    letter-spacing: 0;
}

.uops-portal-ribbon {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: flex-start;
    min-height: 278px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    padding: 1.55rem;
    margin-bottom: 1rem;
    box-shadow: 0 24px 54px rgba(9, 32, 42, .14);
}

.uops-portal-ribbon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("/assets/university_ops/images/lgu-official-campus-header.webp") center/cover no-repeat;
    opacity: .78;
}

.uops-portal-ribbon::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(4, 12, 18, .78) 0%, rgba(4, 12, 18, .52) 52%, rgba(4, 12, 18, .16) 100%);
}

.uops-portal-ribbon__content {
    max-width: 58rem;
}

.uops-portal-brandline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    color: #dceee9;
    font-weight: 800;
    margin-bottom: 1.25rem;
}

.uops-portal-brandline span {
    line-height: 1.2;
}

.uops-portal-mark {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 6px;
    color: #fff;
    font-size: .78rem;
    letter-spacing: .08em;
}

.uops-portal-logo {
    display: block;
    width: 218px;
    max-width: 48vw;
    height: auto;
    border-radius: 6px;
    background: rgba(255, 255, 255, .95);
    padding: .38rem .5rem;
    box-shadow: 0 10px 24px rgba(4, 27, 38, .16);
}

.uops-portal-brandline .uops-portal-logo {
    width: 188px;
    max-width: min(52vw, 188px);
    flex: 0 1 auto;
}

.uops-auth-hero .uops-portal-brandline .uops-portal-logo {
    width: 218px;
    max-width: min(58vw, 218px);
}

.uops-kicker {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .75rem;
    color: #8ee4c5;
    margin-bottom: .55rem;
    font-weight: 800;
}

.uops-portal-ribbon h1 {
    color: #fff;
    font-size: clamp(2rem, 3.6vw, 3.35rem);
    line-height: 1.04;
    max-width: 48rem;
    margin: 0 0 .75rem;
}

.uops-portal-subtitle {
    color: #d7e5e8;
    max-width: 52rem;
    margin: 0;
    line-height: 1.55;
}

.uops-portal-quick-actions,
.uops-portal-actions,
.uops-inline-actions,
.uops-test-actions {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
}

.uops-portal-quick-actions {
    justify-content: flex-end;
}

.uops-admissions-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 800;
    min-height: 2.5rem;
    padding: .55rem .95rem;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

.uops-admissions-page a.btn {
    text-decoration: none;
}

.uops-admissions-page .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .18rem rgba(31, 107, 84, .18);
}

.uops-admissions-page .btn-primary {
    background: var(--uops-green);
    border-color: var(--uops-green);
}

.uops-admissions-page .btn-primary:hover {
    background: #185943;
    border-color: #185943;
}

.uops-portal-tabs {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--uops-line);
    padding-bottom: .65rem;
}

.uops-portal-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: #fff;
    border-radius: 6px;
    padding: .55rem .85rem;
    color: #24444d;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
}

.uops-portal-tab:hover {
    border-color: #cbd8df;
    text-decoration: none;
}

.uops-portal-tab.is-active {
    background: var(--uops-green-soft);
    color: var(--uops-green);
    border-color: #b9dacd;
}

.uops-portal-note,
.uops-message:not(:empty) {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    background: #fff8e6;
    border: 1px solid #edd28f;
    border-left: 4px solid var(--uops-gold);
    border-radius: 8px;
    padding: .95rem 1rem;
    margin-bottom: 1rem;
    color: #4f3d18;
}

.uops-form-control-error,
.uops-step-panel .form-control[aria-invalid="true"] {
    border-color: #b42318;
    box-shadow: 0 0 0 2px rgba(180, 35, 24, .12);
}

.uops-field-error {
    display: block;
    margin-top: .35rem;
    color: #b42318;
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.35;
}

.uops-validation-group-error {
    border: 1px solid #b42318;
    border-radius: 6px;
    padding: .75rem;
}

.uops-portal-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--uops-line);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 12px 30px rgba(20, 45, 55, .05);
}

.uops-portal-header h2 {
    margin: 0 0 .4rem;
    font-size: 1.35rem;
}

.uops-portal-header .uops-portal-subtitle,
.uops-panel-card .uops-portal-subtitle,
.uops-muted-text {
    color: var(--uops-muted);
}

.uops-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}

.uops-summary-card,
.uops-panel-card,
.uops-status-card,
.uops-test-card,
.uops-test-question,
.uops-payment-card,
.uops-corrections-card {
    background: #fff;
    border: 1px solid var(--uops-line);
    border-radius: 8px;
    padding: 1rem 1.05rem;
    box-shadow: 0 12px 30px rgba(20, 45, 55, .05);
}

.uops-summary-card strong {
    display: block;
    color: var(--uops-ink);
    font-size: 1.35rem;
    line-height: 1.2;
}

.uops-summary-label,
.uops-status-eyebrow {
    display: block;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #6a7a84;
    margin-bottom: .35rem;
    font-weight: 800;
}

.uops-page-grid,
.uops-status-body,
.uops-payment-grid,
.uops-corrections-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .75fr);
    gap: 1rem;
    align-items: start;
}

.uops-main-stack,
.uops-side-stack {
    display: grid;
    gap: 1rem;
}

.uops-panel-card h2,
.uops-panel-card h3,
.uops-payment-card h3,
.uops-corrections-card h3,
.uops-status-card h2 {
    margin-top: 0;
}

.uops-card-list {
    display: grid;
    gap: .65rem;
    padding: 0;
    margin: .75rem 0 0;
    list-style: none;
}

.uops-card-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid #edf2f5;
    padding-top: .65rem;
    color: #31444e;
}

.uops-card-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.uops-card-list span:first-child {
    color: #6a7a84;
    font-weight: 800;
}

.uops-status-card__top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    border-bottom: 1px solid #edf2f5;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.uops-status-card h2 {
    font-size: clamp(1.55rem, 2.5vw, 2.25rem);
    line-height: 1.15;
    margin: .1rem 0 0;
}

.uops-status-badge,
.uops-test-badge {
    display: inline-flex;
    align-items: center;
    max-width: 18rem;
    border-radius: 999px;
    padding: .42rem .72rem;
    background: #e9f5f2;
    color: #155b50;
    font-weight: 800;
    line-height: 1.25;
}

.uops-status-panel {
    border: 1px solid #e2ebef;
    border-radius: 8px;
    padding: 1rem;
    background: #fbfdfe;
}

.uops-status-panel.is-soft {
    background: #fff9e8;
    border-color: #f0dea2;
}

.uops-status-next {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #edf2f5;
}

.uops-status-program-list {
    display: grid;
    gap: .65rem;
    margin-top: .75rem;
}

.uops-status-program-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: .7rem .8rem;
    border: 1px solid #eadfb8;
    border-radius: 8px;
    background: #fffdf5;
}

.uops-status-program-row span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .25rem .55rem;
    font-size: .78rem;
    font-weight: 800;
}

.uops-status-program-row span.is-qualified {
    background: #e9f5f2;
    color: #155b50;
}

.uops-status-program-row span.is-pending {
    background: #f7ead8;
    color: #81520b;
}

.uops-test-meta,
.uops-payment-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin-top: .85rem;
}

.uops-test-meta p,
.uops-payment-meta p {
    margin: 0;
    border: 1px solid #edf2f5;
    border-radius: 8px;
    padding: .7rem;
    background: #fbfdfe;
}

.uops-test-timer,
.uops-test-integrity {
    display: flex;
    gap: .75rem;
    align-items: center;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.uops-test-timer {
    background: #e8f4ef;
    border: 1px solid #b9dacd;
}

.uops-test-integrity {
    background: #fff8e6;
    border: 1px solid #edd28f;
}

.uops-test-options {
    display: grid;
    gap: .6rem;
    margin-top: .85rem;
}

.uops-test-option {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    border: 1px solid #e1e9ef;
    border-radius: 8px;
    padding: .7rem .8rem;
    background: #fbfdfe;
}

.uops-test-option input {
    margin-top: .2rem;
}

.uops-test-actions {
    position: sticky;
    bottom: 1rem;
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--uops-line);
    border-radius: 8px;
    padding: .75rem;
    box-shadow: 0 12px 30px rgba(20, 45, 55, .08);
}

.uops-test-badge.is-success {
    background: #e8f8ef;
    color: #166534;
}

.uops-test-badge.is-danger {
    background: #fdecec;
    color: #b42318;
}

.uops-upload-panel {
    background: #fff;
    border: 1px solid var(--uops-line);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 12px 30px rgba(20, 45, 55, .05);
}

.uops-upload-panel .form-control {
    border-radius: 6px;
}

/* Authentication pages are full-screen overlays. Prevent the inherited Frappe page from scrolling behind them. */
body.uops-admissions-auth-body {
    overflow: hidden;
}

/* =========================================================================
   AUTH PAGE REDESIGN — FIXED RESPONSIVE SCALE
   Accessible minimalism + subtle paper UI
   ========================================================================= */

.uops-auth-page-wrapper {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    z-index: 1050;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #FAF9F6;
    color: #17201D;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.uops-auth-page-wrapper *,
.uops-auth-page-wrapper *::before,
.uops-auth-page-wrapper *::after {
    box-sizing: border-box;
}

.uops-auth-container {
    position: relative;
    display: grid;
    grid-template-columns: 46% 54%;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #FAF9F6;
}

/* -------------------------------------------------------------------------
   Left hero panel — refined three-zone composition
   ------------------------------------------------------------------------- */
.uops-auth-hero-panel {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    color: #FFFFFF;
    box-shadow: 1px 0 16px rgba(0, 0, 0, 0.045);
}

.uops-auth-hero-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/assets/university_ops/images/lgu-official-campus-header.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.01);
}

.uops-auth-hero-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg,
            rgba(0, 55, 43, 0.88) 0%,
            rgba(0, 62, 48, 0.68) 48%,
            rgba(0, 55, 43, 0.42) 100%),
        linear-gradient(0deg,
            rgba(0, 42, 33, 0.42) 0%,
            rgba(0, 42, 33, 0) 45%);
}

.uops-auth-hero-panel-gradient {
    display: none;
}

.uops-auth-hero-panel>* {
    position: relative;
    z-index: 3;
}

/*
   Three deliberate vertical zones:
   1. University branding at the top
   2. Applicant Portal message in the visual center
   3. Security information at the bottom
*/
.uops-auth-hero-content-wrapper {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding:
        clamp(28px, 4.5vh, 42px) clamp(38px, 4.5vw, 62px);
    overflow: hidden;
}

/* University branding */
.uops-auth-brand {
    grid-row: 1;
    align-self: start;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/*
   Crop a horizontal wordmark to its left crest area when the current asset
   contains both a crest and university wording. If a crest-only asset is
   supplied later, this still renders as a compact square mark.
*/
.uops-auth-brand img {
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    max-width: 42px;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: left center;
    border-radius: 50%;
}

.uops-auth-brand::after {
    content: '';
    flex: 0 0 1px;
    width: 1px;
    height: 32px;
    margin: 0 2px;
    background: rgba(255, 255, 255, 0.30);
}

.uops-auth-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0;
}

.uops-auth-brand-text span {
    margin: 0;
    color: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

/* Main hero content */
.uops-auth-hero-content {
    grid-row: 2;
    align-self: center;
    width: 100%;
    max-width: 470px;
    margin: 0;
    transform: translateY(-8px);
}

.uops-auth-eyebrow-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}

.uops-auth-eyebrow {
    margin: 0;
    color: #A6CE39;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.uops-auth-eyebrow-line {
    flex: 0 0 34px;
    width: 34px;
    height: 1px;
    background: #A6CE39;
    opacity: 0.9;
}

.uops-auth-title {
    margin: 0 0 16px;
    color: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(42px, 3.7vw, 52px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.uops-auth-title-line {
    display: block;
}

.uops-auth-highlight {
    color: #A6CE39;
}

.uops-auth-subtitle {
    max-width: 390px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
}

/* Security information */
.uops-auth-security-minimal {
    grid-row: 3;
    align-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.uops-auth-security-minimal svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: #A6CE39;
}

.uops-auth-security-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.uops-auth-security-text strong {
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.uops-auth-security-text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    line-height: 1.3;
}


/* -------------------------------------------------------------------------
   Right form panel
   ------------------------------------------------------------------------- */
.uops-auth-form-panel {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(18px, 2.8vh, 28px) clamp(30px, 5vw, 68px);
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #FAF9F6;
    background-image:
        linear-gradient(to right, rgba(120, 120, 120, 0.022) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(120, 120, 120, 0.022) 1px, transparent 1px);
    background-size: 4px 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 120, 91, 0.22) transparent;
}

.uops-auth-form-panel::-webkit-scrollbar {
    width: 6px;
}

.uops-auth-form-panel::-webkit-scrollbar-track {
    background: transparent;
}

.uops-auth-form-panel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(0, 120, 91, 0.20);
}

.uops-auth-form-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #00785B;
    opacity: 0.82;
}

.uops-auth-view {
    display: none;
    width: 100%;
    margin: 0;
}

#uops-view-login.uops-auth-view {
    width: min(100%, 380px);
}

#uops-view-register.uops-auth-view {
    width: min(100%, 540px);
    max-width: 540px;
}

.uops-auth-view.is-active {
    display: block;
}

.uops-auth-paper-detail-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.uops-auth-paper-detail {
    flex: 0 0 auto;
    margin: 0;
    color: #00785B;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.uops-auth-paper-line {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(0, 120, 91, 0.26);
}

.uops-auth-form-header {
    margin-bottom: 22px;
}

.uops-auth-form-title {
    margin: 0 0 5px;
    color: #17201D;
    font-size: clamp(26px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.uops-auth-form-subtitle {
    margin: 0;
    color: #68716D;
    font-size: 13px;
    line-height: 1.45;
}

.uops-auth-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    margin-bottom: 18px;
}

.uops-auth-form-grid.single-column {
    grid-template-columns: 1fr;
}

.uops-auth-form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 0 !important;
}

.uops-auth-form-group.full-width {
    grid-column: 1 / -1;
}

.uops-auth-label {
    display: block;
    margin: 0 0 6px;
    color: #26332F;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.uops-auth-input {
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #CDD5D1;
    border-radius: 7px;
    outline: none;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: none;
    color: #17201D;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.uops-auth-input:hover {
    border-color: #A6B4AF;
    background: rgba(255, 255, 255, 0.95);
}

.uops-auth-input:focus {
    border-color: #00785B;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 120, 91, 0.10);
}

.uops-auth-input::placeholder {
    color: #9AA6A2;
    font-weight: 400;
}

.uops-auth-pwd-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.uops-auth-pwd-wrapper .uops-auth-input {
    padding-right: 42px;
}

.uops-auth-pwd-toggle {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    outline: 0;
    background: transparent;
    color: #68716D;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.uops-auth-pwd-toggle:hover {
    color: #17201D;
    background: rgba(0, 120, 91, 0.055);
}

.uops-auth-pwd-toggle:focus-visible {
    color: #00785B;
    box-shadow: 0 0 0 2px rgba(0, 120, 91, 0.18);
}

.uops-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 7px;
    background: #00785B;
    box-shadow: 0 4px 12px rgba(0, 90, 68, 0.10);
    color: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.uops-auth-btn:hover {
    background: #006A51;
    box-shadow: 0 6px 14px rgba(0, 90, 68, 0.13);
    transform: translateY(-1px);
}

.uops-auth-btn:active {
    background: #004D3D;
    box-shadow: 0 3px 8px rgba(0, 90, 68, 0.10);
    transform: translateY(0);
}

.uops-auth-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 120, 91, 0.18), 0 4px 12px rgba(0, 90, 68, 0.10);
}

.uops-auth-btn:disabled {
    opacity: 0.72;
    cursor: not-allowed;
    transform: none;
}

.uops-auth-btn-secondary {
    border: 1px solid #D7DEDA;
    background: #FFFFFF;
    box-shadow: none;
    color: #00785B;
}

.uops-auth-btn-secondary:hover {
    border-color: #A9B7B1;
    background: #F5F6F3;
    box-shadow: none;
}

.uops-auth-footer-link {
    margin-top: 20px;
    color: #68716D;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
}

.uops-auth-footer-text {
    display: inline-block;
    margin-bottom: 5px;
}

.uops-auth-nav-link,
.uops-auth-forgot-link {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #00785B;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    transition: color 150ms ease;
}

.uops-auth-forgot-link {
    float: right;
    font-weight: 600;
}

.uops-auth-forgot-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: #00785B;
    transition: width 180ms ease;
}

.uops-auth-forgot-link:hover::after {
    width: 100%;
}

.uops-auth-nav-link:hover,
.uops-auth-forgot-link:hover {
    color: #004D3D;
}

.uops-auth-nav-link:focus-visible,
.uops-auth-forgot-link:focus-visible {
    outline: 2px solid rgba(0, 120, 91, 0.24);
    outline-offset: 3px;
    border-radius: 2px;
}

.uops-auth-nav-link .uops-auth-arrow {
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
    transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.uops-auth-nav-link:hover .uops-auth-arrow {
    transform: translateX(4px);
}

select.uops-auth-input {
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2368716D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* -------------------------------------------------------------------------
   Modern searchable Program Interest dropdown
   The real <select> remains in the DOM for FormData/backend compatibility.
   ------------------------------------------------------------------------- */

.uops-auth-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.uops-program-select {
    position: relative;
    width: 100%;
}

.uops-program-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #CDD5D1;
    border-radius: 7px;
    outline: 0;
    background: rgba(255, 255, 255, 0.82);
    color: #17201D;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.uops-program-select-trigger:hover {
    border-color: #A6B4AF;
    background: rgba(255, 255, 255, 0.96);
}

.uops-program-select-trigger:focus-visible,
.uops-program-select.is-open .uops-program-select-trigger {
    border-color: #00785B;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 120, 91, 0.10);
}

.uops-program-select-value {
    min-width: 0;
    overflow: hidden;
    color: #17201D;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uops-program-select-value.is-placeholder {
    color: #9AA6A2;
}

.uops-program-select-chevron {
    flex: 0 0 auto;
    color: #68716D;
    transition: transform 180ms ease, color 180ms ease;
}

.uops-program-select.is-open .uops-program-select-chevron {
    color: #00785B;
    transform: rotate(180deg);
}

.uops-program-select-menu {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    z-index: 80;
    overflow: hidden;
    border: 1px solid #D7DEDA;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow:
        0 18px 45px rgba(23, 32, 29, 0.13),
        0 3px 10px rgba(23, 32, 29, 0.06);
    transform-origin: top center;
    animation: uopsProgramMenuIn 150ms ease-out both;
}

.uops-program-select.is-dropup .uops-program-select-menu {
    top: auto;
    bottom: calc(100% + 7px);
    transform-origin: bottom center;
}

@keyframes uopsProgramMenuIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.992);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.uops-program-select-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 11px;
    border-bottom: 1px solid #EEF1EF;
    color: #7A8581;
    background: #FCFCFA;
}

.uops-program-select-search-wrap svg {
    flex: 0 0 auto;
}

.uops-program-select-search {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #17201D;
    font: inherit;
    font-size: 12px;
}

.uops-program-select-search::placeholder {
    color: #9AA6A2;
}

.uops-program-select-search::-webkit-search-cancel-button {
    cursor: pointer;
}

.uops-program-select-options {
    max-height: 250px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 120, 91, 0.22) transparent;
}

.uops-program-select-options::-webkit-scrollbar {
    width: 6px;
}

.uops-program-select-options::-webkit-scrollbar-track {
    background: transparent;
}

.uops-program-select-options::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(0, 120, 91, 0.20);
}

.uops-program-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    outline: 0;
    background: transparent;
    color: #26332F;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.uops-program-select-option:hover,
.uops-program-select-option:focus-visible {
    background: #F2F7F5;
    color: #005F49;
}

.uops-program-select-option.is-selected {
    background: #EAF5F1;
    color: #00684F;
    font-weight: 650;
}

.uops-program-select-option-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.uops-program-select-option-check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    opacity: 0;
}

.uops-program-select-option.is-selected .uops-program-select-option-check {
    opacity: 1;
}

.uops-program-select-empty {
    padding: 22px 14px;
    color: #7A8581;
    font-size: 12px;
    text-align: center;
}

.uops-auth-form-group.has-error .uops-program-select-trigger,
.uops-program-select-trigger.is-invalid,
.uops-program-select-trigger[aria-invalid="true"] {
    border-color: #D92D20;
    background: #FFFBFA;
}

.uops-auth-form-group.has-error .uops-program-select-trigger:focus-visible,
.uops-program-select-trigger.is-invalid:focus-visible {
    border-color: #D92D20;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.10);
}

@media (max-height: 700px) and (min-width: 993px) {
    .uops-program-select-trigger {
        height: 40px;
        min-height: 40px;
        font-size: 12px;
    }

    .uops-program-select-options {
        max-height: 210px;
    }
}

@media (max-width: 600px) {
    .uops-program-select-trigger {
        height: 46px;
        min-height: 46px;
        font-size: 14px;
    }

    .uops-program-select-menu {
        border-radius: 9px;
    }

    .uops-program-select-options {
        max-height: 220px;
    }

    .uops-program-select-option {
        min-height: 42px;
        font-size: 13px;
    }
}

.uops-auth-field-error,
.uops-auth-error-msg {
    display: none;
    margin: 5px 0 0;
    color: #B42318;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
}

.uops-auth-form-group.has-error .uops-auth-field-error {
    animation: uopsAuthFieldErrorIn 160ms ease-out both;
}

@keyframes uopsAuthFieldErrorIn {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom inline validation. Native browser validation bubbles are disabled in the auth forms. */
.uops-auth-form-group.has-error .uops-auth-field-error,
.uops-auth-form-group.has-error .uops-auth-error-msg {
    display: block;
}

.uops-auth-form-group.has-error .uops-auth-label {
    color: #B42318;
}

.uops-auth-form-group.has-error .uops-auth-input,
.uops-auth-input.is-invalid,
.uops-auth-input[aria-invalid="true"] {
    border-color: #D92D20;
    background: #FFFBFA;
}

.uops-auth-form-group.has-error .uops-auth-input:hover,
.uops-auth-input.is-invalid:hover,
.uops-auth-input[aria-invalid="true"]:hover {
    border-color: #B42318;
}

.uops-auth-form-group.has-error .uops-auth-input:focus,
.uops-auth-input.is-invalid:focus,
.uops-auth-input[aria-invalid="true"]:focus {
    border-color: #D92D20;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.10);
}

.uops-auth-form-group.has-error .uops-auth-pwd-toggle {
    color: #B42318;
}

/* Auth form-level messages: keep them completely invisible when unused.
   Field validation errors are handled inline by .uops-auth-field-error.
   Real server/API messages render as simple text instead of an empty yellow box. */
.uops-auth-form-panel .uops-message {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Show genuine form-level messages without the yellow alert container. */
.uops-auth-form-panel .uops-message:not(:empty) {
    display: block !important;
    min-height: 0 !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #B42318 !important;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
}

/* Legacy is-invalid class remains supported by the consolidated rules above. */

/* Optional spinner used by the submit button while signing in. */
.uops-auth-spinner,
.uops-auth-btn-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: authSpin 0.75s linear infinite;
}

@keyframes authSpin {
    to {
        transform: rotate(360deg);
    }
}

/* -------------------------------------------------------------------------
   Compact desktop height — essential for 1366×768 browser windows
   ------------------------------------------------------------------------- */
@media (max-height: 700px) and (min-width: 993px) {
    .uops-auth-hero-content-wrapper {
        padding: 24px clamp(36px, 4vw, 52px);
    }

    .uops-auth-brand {
        gap: 10px;
    }

    .uops-auth-brand img {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        max-width: 36px;
    }

    .uops-auth-brand::after {
        height: 27px;
    }

    .uops-auth-brand-text span {
        font-size: 13px;
    }

    .uops-auth-hero-content {
        max-width: 420px;
        transform: translateY(-4px);
    }

    .uops-auth-eyebrow-wrapper {
        margin-bottom: 13px;
    }

    .uops-auth-eyebrow {
        font-size: 10px;
    }

    .uops-auth-title {
        margin-bottom: 13px;
        font-size: 42px;
    }

    .uops-auth-subtitle {
        max-width: 350px;
        font-size: 12px;
        line-height: 1.45;
    }

    .uops-auth-security-minimal {
        gap: 8px;
    }

    .uops-auth-security-minimal svg {
        width: 16px;
        height: 16px;
    }

    .uops-auth-security-text strong {
        font-size: 11px;
    }

    .uops-auth-security-text p {
        font-size: 10px;
    }

    .uops-auth-form-panel {
        padding: 16px clamp(28px, 4vw, 52px);
    }

    #uops-view-login.uops-auth-view {
        width: min(100%, 360px);
    }

    #uops-view-register.uops-auth-view {
        width: min(100%, 500px);
        max-width: 500px;
    }

    .uops-auth-paper-detail-wrapper {
        margin-bottom: 13px;
    }

    .uops-auth-paper-detail {
        font-size: 10px;
    }

    .uops-auth-form-header {
        margin-bottom: 16px;
    }

    .uops-auth-form-title {
        font-size: 25px;
    }

    .uops-auth-form-subtitle {
        font-size: 12px;
    }

    .uops-auth-form-grid {
        gap: 9px 12px;
        margin-bottom: 14px;
    }

    .uops-auth-label {
        margin-bottom: 5px;
        font-size: 11px;
    }

    .uops-auth-input,
    .uops-auth-btn {
        height: 40px;
        min-height: 40px;
        font-size: 12px;
    }

    .uops-auth-footer-link {
        margin-top: 15px;
        font-size: 12px;
    }

    .uops-auth-nav-link,
    .uops-auth-forgot-link {
        font-size: 12px;
    }

    .uops-auth-form-panel .uops-message:not(:empty) {
        margin-top: 6px !important;
        padding: 0 !important;
        font-size: 10px;
    }

    .uops-auth-field-error,
    .uops-auth-error-msg {
        margin-top: 3px;
        font-size: 10px;
        line-height: 1.25;
    }
}

/* Extra-short desktop viewport. */
@media (max-height: 610px) and (min-width: 993px) {
    .uops-auth-hero-content-wrapper {
        padding: 18px 34px;
    }

    .uops-auth-brand img {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        max-width: 32px;
    }

    .uops-auth-brand::after {
        height: 24px;
    }

    .uops-auth-brand-text span {
        font-size: 11px;
    }

    .uops-auth-hero-content {
        transform: none;
    }

    .uops-auth-title {
        font-size: 38px;
    }

    .uops-auth-subtitle {
        font-size: 11.5px;
    }

    .uops-auth-security-text p {
        display: none;
    }

    #uops-view-login.uops-auth-view {
        width: min(100%, 340px);
    }

    .uops-auth-paper-detail-wrapper {
        margin-bottom: 10px;
    }

    .uops-auth-form-header {
        margin-bottom: 13px;
    }

    .uops-auth-form-title {
        font-size: 23px;
    }

    .uops-auth-form-grid {
        gap: 8px 10px;
        margin-bottom: 11px;
    }

    .uops-auth-input,
    .uops-auth-btn {
        height: 38px;
        min-height: 38px;
    }

    .uops-auth-footer-link {
        margin-top: 12px;
    }
}

/* -------------------------------------------------------------------------
   Narrow desktop / tablet
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) and (min-width: 993px) {
    .uops-auth-container {
        grid-template-columns: 44% 56%;
    }

    .uops-auth-hero-content-wrapper {
        padding-left: 34px;
        padding-right: 34px;
    }

    .uops-auth-hero-content {
        max-width: 400px;
    }

    .uops-auth-title {
        font-size: clamp(38px, 4vw, 46px);
    }

    .uops-auth-form-panel {
        padding-left: 34px;
        padding-right: 34px;
    }
}

/* -------------------------------------------------------------------------
   Tablet and mobile — intentional stacked layout, scrolling allowed
   ------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .uops-auth-page-wrapper {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #FAF9F6;
    }

    .uops-auth-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100%;
        height: auto;
        overflow: visible;
    }

    .uops-auth-hero-panel {
        width: 100%;
        min-height: 300px;
        height: auto;
        overflow: hidden;
    }

    .uops-auth-hero-content-wrapper {
        display: flex;
        flex-direction: column;
        min-height: 300px;
        height: auto;
        padding: 28px 28px 30px;
        overflow: visible;
    }

    .uops-auth-brand {
        margin-bottom: 44px;
    }

    .uops-auth-hero-content {
        margin: 0;
        max-width: 500px;
        transform: none;
    }

    .uops-auth-title {
        font-size: clamp(36px, 7vw, 48px);
    }

    .uops-auth-security-minimal {
        margin-top: auto;
        padding-top: 24px;
    }

    .uops-auth-form-panel {
        width: 100%;
        min-height: auto;
        height: auto;
        padding: 42px 28px 54px;
        overflow: visible;
    }

    #uops-view-login.uops-auth-view {
        width: min(100%, 420px);
    }

    #uops-view-register.uops-auth-view {
        width: min(100%, 560px);
        max-width: 560px;
    }
}

@media (max-width: 600px) {

    .uops-auth-hero-panel,
    .uops-auth-hero-content-wrapper {
        min-height: 270px;
    }

    .uops-auth-hero-content-wrapper {
        padding: 22px 20px 24px;
    }

    .uops-auth-brand {
        gap: 9px;
        margin-bottom: 34px;
    }

    .uops-auth-brand img {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        max-width: 32px;
    }

    .uops-auth-brand::after {
        height: 22px;
    }

    .uops-auth-brand-text span {
        font-size: 11px;
    }

    .uops-auth-eyebrow-wrapper {
        margin-bottom: 12px;
    }

    .uops-auth-title {
        margin-bottom: 12px;
        font-size: clamp(33px, 10vw, 42px);
    }

    .uops-auth-subtitle {
        font-size: 13px;
    }

    .uops-auth-security-minimal {
        display: none;
    }

    .uops-auth-form-panel {
        padding: 34px 20px 44px;

    }

    .uops-auth-form-grid {
        grid-template-columns: 1fr;
    }

    .uops-auth-form-title {
        font-size: 26px;
    }

    .uops-auth-input,
    .uops-auth-btn {
        height: 46px;
        min-height: 46px;
        font-size: 14px;
    }

    .uops-auth-label,
    .uops-auth-footer-link,
    .uops-auth-nav-link,
    .uops-auth-forgot-link {
        font-size: 13px;
    }
}

/* -------------------------------------------------------------------------
   Accessibility: reduced motion scoped only to authentication UI
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .uops-auth-page-wrapper *,
    .uops-auth-page-wrapper *::before,
    .uops-auth-page-wrapper *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 992px) {

    .uops-portal-ribbon,
    .uops-portal-header,
    .uops-status-card__top,
    .uops-status-next {
        flex-direction: column;
        align-items: flex-start;
    }

    .uops-page-grid,
    .uops-status-body,
    .uops-payment-grid,
    .uops-corrections-grid,
    .uops-summary-grid {
        grid-template-columns: 1fr;
    }

    .uops-portal-quick-actions,
    .uops-portal-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .uops-admissions-page {
        padding-top: 1rem;
    }

    .uops-portal-ribbon {
        min-height: 230px;
        padding: 1rem;
    }

    .uops-portal-ribbon h1 {
        font-size: 2rem;
    }

    .uops-grid {
        grid-template-columns: 1fr;
    }

    .uops-card-list li {
        display: block;
    }

    .uops-portal-quick-actions,
    .uops-portal-actions,
    .uops-inline-actions,
    .uops-test-actions {
        width: 100%;
    }

    .uops-portal-quick-actions .btn,
    .uops-portal-actions .btn,
    .uops-inline-actions .btn,
    .uops-test-actions .btn,
    .uops-portal-logout-form,
    .uops-portal-logout-form .btn {
        width: 100%;
    }

    .uops-portal-brandline .uops-portal-logo {
        max-width: 100%;
    }
}

/* =========================================================================
   LGU ADMISSIONS PORTAL — COHESIVE PAPER MINIMAL UI
   Matches the approved Login / Registration visual language.
   Everything is scoped to .lgu-adm-page so auth pages stay unchanged.
   ========================================================================= */

body.uops-admissions-apply-body {
    margin: 0;
    background: #F7F7F4;
    color: #17201D;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.lgu-adm-page {
    --portal-green: #00785B;
    --portal-green-dark: #005D47;
    --portal-green-soft: #EAF5F1;
    --portal-lime: #A6CE39;
    --portal-ink: #17201D;
    --portal-muted: #68716D;
    --portal-border: #D7DEDA;
    --portal-paper: #FAF9F6;
    --portal-surface: #FFFFFF;
    --portal-danger: #D92D20;
    --portal-danger-dark: #B42318;
    --portal-shadow: 0 12px 34px rgba(23, 32, 29, 0.06);

    min-height: 100dvh;
    padding-bottom: 48px;
    color: var(--portal-ink);
    background-color: var(--portal-paper);
    background-image:
        linear-gradient(to right, rgba(82, 92, 87, 0.018) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(82, 92, 87, 0.018) 1px, transparent 1px);
    background-size: 5px 5px;
}

.lgu-adm-page *,
.lgu-adm-page *::before,
.lgu-adm-page *::after {
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Authenticated top bar
   ------------------------------------------------------------------------- */

.lgu-adm-page .lgu-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    border-top: 3px solid var(--portal-green);
    border-bottom: 1px solid #E5EAE7;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 18px rgba(23, 32, 29, 0.035);
    backdrop-filter: blur(14px);
}

.lgu-adm-page .lgu-topbar__inner {
    display: flex !important;
    align-items: center !important;
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px !important;
    min-height: 70px;
    margin: 0 auto;
    padding: 8px 0;
}

.lgu-adm-page .lgu-topbar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.lgu-adm-page .lgu-topbar__logo {
    display: block;
    width: auto;
    max-width: 172px;
    height: 38px;
    object-fit: contain;
}

.lgu-adm-page .lgu-topbar__brand-text {
    display: flex;
    align-items: center;
}

.lgu-adm-page .lgu-topbar__portal-label {
    color: var(--portal-ink);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.lgu-adm-page .lgu-topbar__nav {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
}

.lgu-adm-page .lgu-topbar__nav>div {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.lgu-adm-page .lgu-topbar__nav>div>span {
    max-width: 160px;
    overflow: hidden;
    color: #42504B !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lgu-adm-page .lgu-topbar__divider {
    height: 24px !important;
    margin: 0 3px !important;
    background: #E3E9E5 !important;
}

.lgu-adm-page .lgu-topbar__avatar {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    margin: 0 !important;
    border: 1px solid #CEE2DA;
    border-radius: 50%;
    background: var(--portal-green-soft);
    color: var(--portal-green-dark);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.lgu-adm-page .lgu-portal-logout-form {
    margin: 0 !important;
    padding: 0 !important;
}

/* -------------------------------------------------------------------------
   Shared buttons
   ------------------------------------------------------------------------- */

.lgu-adm-page .lgu-btn,
.lgu-adm-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 7px;
    outline: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.lgu-adm-page .lgu-btn:hover,
.lgu-adm-page .btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.lgu-adm-page .lgu-btn--sm {
    min-height: 34px;
    padding: 0 11px;
    font-size: 10px;
}

.lgu-adm-page .lgu-btn--primary,
.lgu-adm-page .btn-primary {
    border-color: var(--portal-green);
    background: var(--portal-green);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 120, 91, 0.12);
}

.lgu-adm-page .lgu-btn--primary:hover,
.lgu-adm-page .btn-primary:hover {
    border-color: var(--portal-green-dark);
    background: var(--portal-green-dark);
    color: #FFFFFF;
}

.lgu-adm-page .lgu-btn--secondary {
    border-color: #CAD7D2;
    background: #FFFFFF;
    color: #315047;
}

.lgu-adm-page .lgu-btn--secondary:hover {
    border-color: #A8BFB6;
    background: #F4F8F6;
    color: var(--portal-green-dark);
}

.lgu-adm-page .lgu-btn--ghost {
    border-color: transparent;
    background: transparent;
    color: #52635C;
}

.lgu-adm-page .lgu-btn--ghost:hover {
    border-color: #DEE7E3;
    background: #F5F8F6;
    color: var(--portal-green-dark);
}

.lgu-adm-page .lgu-btn:disabled,
.lgu-adm-page .btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

/* -------------------------------------------------------------------------
   Page shell and intro — intentionally simpler than a dashboard
   ------------------------------------------------------------------------- */

.lgu-adm-page .lgu-apply-shell,
.lgu-adm-page .lgu-workspace {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

.lgu-adm-page .lgu-apply-intro {
    padding: 34px 0 22px;
}

.lgu-adm-page .lgu-apply-eyebrow,
.lgu-adm-page .lgu-sidebar-kicker,
.lgu-adm-page .lgu-action-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 9px;
    color: var(--portal-green);
    font-size: 9px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lgu-adm-page .lgu-apply-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--portal-lime);
    box-shadow: 0 0 0 4px rgba(166, 206, 57, 0.12);
}

.lgu-adm-page .lgu-apply-intro h1 {
    max-width: 760px;
    margin: 0 0 8px;
    color: var(--portal-ink);
    font-size: clamp(30px, 3vw, 43px);
    font-weight: 720;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.lgu-adm-page .lgu-apply-intro h1 span {
    color: var(--portal-green);
}

.lgu-adm-page .lgu-apply-intro>p {
    max-width: 740px;
    margin: 0;
    color: var(--portal-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Single paper-style application summary strip, not three dashboard cards */
.lgu-adm-page .lgu-application-strip {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 0;
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid #DDE4E0;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.lgu-adm-page .lgu-application-strip__item {
    position: relative;
    min-width: 0;
    padding: 14px 17px;
}

.lgu-adm-page .lgu-application-strip__item+.lgu-application-strip__item {
    border-left: 1px solid #E6EBE8;
}

.lgu-adm-page .lgu-application-strip__label {
    display: block;
    margin-bottom: 5px;
    color: #88928E;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.lgu-adm-page .lgu-application-strip__value {
    display: block;
    overflow: hidden;
    color: var(--portal-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lgu-adm-page .lgu-application-strip__progress {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.lgu-adm-page .lgu-application-strip__progress strong {
    flex: 0 0 auto;
    color: var(--portal-green);
    font-size: 20px;
    font-weight: 720;
    line-height: 1;
}

.lgu-adm-page .lgu-apply-progress-track {
    width: 100%;
    height: 4px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #DFE8E4;
}

.lgu-adm-page .lgu-apply-progress-track>span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--portal-green);
    transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------
   Workspace
   ------------------------------------------------------------------------- */

.lgu-adm-page .lgu-apply-workspace,
.lgu-adm-page .lgu-workspace {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.lgu-adm-page .lgu-sidebar {
    position: sticky;
    top: 88px;
    overflow: hidden;
    border: 1px solid #DDE4E0;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.lgu-adm-page .lgu-sidebar-header {
    padding: 17px 16px 13px;
    border-bottom: 1px solid #E8ECEA;
}

.lgu-adm-page .lgu-sidebar-header h2 {
    margin: 0 0 5px;
    color: var(--portal-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.lgu-adm-page .lgu-sidebar-header p {
    margin: 0;
    color: #7A8581;
    font-size: 10px;
    line-height: 1.5;
}

.lgu-adm-page .uops-step-nav {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 7px;
}

.lgu-adm-page .uops-step-nav button {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 52px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    outline: 0;
    background: transparent;
    color: #46554F;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.lgu-adm-page .uops-step-nav button:hover {
    background: #F6F8F7;
    color: var(--portal-green-dark);
}

.lgu-adm-page .uops-step-nav button.active {
    border-color: #CFE3DB;
    background: #EDF7F3;
    color: var(--portal-green-dark);
}

.lgu-adm-page .uops-step-nav button.active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--portal-green);
}

.lgu-adm-page .uops-step-index {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid #CCD8D3;
    border-radius: 50%;
    background: #FFFFFF;
    color: #61716B;
    font-size: 10px;
    font-weight: 700;
}

.lgu-adm-page .uops-step-nav button.active .uops-step-index {
    border-color: var(--portal-green);
    background: var(--portal-green);
    color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(0, 120, 91, 0.08);
}

.lgu-adm-page .uops-step-nav button.is-complete .uops-step-index {
    border-color: #83C0A4;
    background: #E8F5EE;
    color: #21734F;
}

.lgu-adm-page .uops-step-nav strong {
    display: block;
    color: inherit;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
}

.lgu-adm-page .uops-step-nav small {
    display: block;
    margin-top: 1px;
    color: #8A9490;
    font-size: 9px;
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   Main form column
   ------------------------------------------------------------------------- */

.lgu-adm-page .lgu-main,
.lgu-adm-page .uops-form-column {
    min-width: 0;
}

.lgu-adm-page .lgu-action-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 12px;
    padding: 17px 18px;
    border: 1px solid #DDE4E0;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.lgu-adm-page .lgu-action-bar__copy {
    max-width: 590px;
}

.lgu-adm-page .lgu-action-bar__copy h2 {
    margin: 0 0 6px;
    color: var(--portal-ink);
    font-size: 21px;
    font-weight: 710;
    line-height: 1.13;
    letter-spacing: -0.03em;
}

.lgu-adm-page .lgu-action-bar__sub {
    margin: 0;
    color: var(--portal-muted);
    font-size: 11px;
    line-height: 1.55;
}

.lgu-adm-page .lgu-action-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.lgu-adm-page .uops-message {
    display: none;
    margin: 0 0 12px;
    padding: 9px 11px;
    border: 1px solid #E6D9B6;
    border-radius: 7px;
    background: #FFFBEF;
    color: #725B24;
    font-size: 10px;
    font-weight: 550;
    line-height: 1.45;
}

.lgu-adm-page .uops-message:not(:empty) {
    display: block;
}

/* -------------------------------------------------------------------------
   Paper-like step panels
   ------------------------------------------------------------------------- */

.lgu-adm-page .uops-step-panel {
    display: none;
    margin: 0 0 14px;
    padding: 20px;
    border: 1px solid #DDE4E0;
    border-radius: 11px;
    background-color: rgba(255, 255, 255, 0.94);
    background-image:
        linear-gradient(to right, rgba(82, 92, 87, 0.012) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(82, 92, 87, 0.012) 1px, transparent 1px);
    background-size: 5px 5px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.lgu-adm-page .uops-step-panel.active {
    display: block;
}

.lgu-adm-page .uops-step-panel.uops-step-enter {
    animation: lguPortalStepIn 220ms ease-out both;
}

@keyframes lguPortalStepIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lgu-adm-page .uops-step-panel>h3 {
    margin: 0 0 5px;
    color: var(--portal-ink);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.lgu-adm-page .uops-step-help {
    max-width: 760px;
    margin: 0 0 17px;
    color: var(--portal-muted);
    font-size: 11px;
    line-height: 1.55;
}

.lgu-adm-page .uops-step-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #E8ECEA;
}

/* -------------------------------------------------------------------------
   Form fields
   ------------------------------------------------------------------------- */

.lgu-adm-page .uops-grid {
    display: grid;
}

.lgu-adm-page .uops-step-panel .uops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 15px;
}

.lgu-adm-page .lgu-field,
.lgu-adm-page .form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
}

.lgu-adm-page .lgu-field[hidden],
.lgu-adm-page .form-group[hidden] {
    display: none !important;
}

.lgu-adm-page .uops-grid .lgu-field.uops-span-2 {
    grid-column: 1 / -1;
}

.lgu-adm-page .lgu-field>label,
.lgu-adm-page .form-group>label {
    display: block;
    margin: 0 0 5px;
    color: #34423D;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.3;
}

.lgu-adm-page .lgu-field:has([data-uops-required="1"])>label::after,
.lgu-adm-page .form-group:has([data-uops-required="1"])>label::after {
    content: " *";
    color: var(--portal-danger);
}

/* Auto-calculated marks (O/A-level equivalence) are disabled, so they show
   greyed-out and must not display the required asterisk. */
.lgu-adm-page .lgu-field:has([data-uops-required="1"]):has(input:disabled)>label::after,
.lgu-adm-page .form-group:has([data-uops-required="1"]):has(input:disabled)>label::after {
    content: none;
}

.lgu-adm-page .lgu-input,
.lgu-adm-page .lgu-select,
.lgu-adm-page .form-control,
.lgu-adm-page textarea {
    display: block;
    width: 100%;
    height: 41px;
    min-height: 41px;
    padding: 0 12px;
    border: 1px solid #CDD5D1;
    border-radius: 7px;
    outline: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    color: var(--portal-ink);
    font: inherit;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.lgu-adm-page textarea {
    height: auto;
    min-height: 94px;
    padding-top: 10px;
    padding-bottom: 10px;
    resize: vertical;
}

.lgu-adm-page .lgu-input:hover,
.lgu-adm-page .lgu-select:hover,
.lgu-adm-page .form-control:hover,
.lgu-adm-page textarea:hover {
    border-color: #AAB8B2;
}

.lgu-adm-page .lgu-input:focus,
.lgu-adm-page .lgu-select:focus,
.lgu-adm-page .form-control:focus,
.lgu-adm-page textarea:focus {
    border-color: var(--portal-green);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 120, 91, 0.09);
}

.lgu-adm-page .lgu-input:disabled,
.lgu-adm-page .lgu-select:disabled,
.lgu-adm-page .form-control:disabled {
    background: #F2F4F3;
    color: #7D8783;
}

.lgu-adm-page .lgu-input::placeholder,
.lgu-adm-page textarea::placeholder {
    color: #9AA6A2;
}

.lgu-adm-page select.lgu-select,
.lgu-adm-page select.form-control {
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2368716D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.lgu-adm-page .uops-field-help {
    display: block;
    margin-top: 4px;
    color: #7E8984;
    font-size: 9px;
    line-height: 1.4;
}

/* Inline validation */
.lgu-adm-page .lgu-input.uops-field-error,
.lgu-adm-page .lgu-select.uops-field-error,
.lgu-adm-page .form-control.uops-field-error,
.lgu-adm-page textarea.uops-field-error {
    border-color: var(--portal-danger);
    background: #FFFBFA;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.06);
}

.lgu-adm-page .lgu-field:has(.uops-field-error)>label,
.lgu-adm-page .form-group:has(.uops-field-error)>label {
    color: var(--portal-danger-dark);
}

.lgu-adm-page .uops-inline-error {
    display: none;
    margin-top: 4px;
    color: var(--portal-danger-dark);
    font-size: 9px;
    font-weight: 550;
    line-height: 1.35;
}

/* Secondary cards */
.lgu-adm-page .uops-academic-grid {
    display: grid;
    gap: 12px;
}

.lgu-adm-page .uops-academic-card,
.lgu-adm-page .uops-army-panel,
.lgu-adm-page #uops-document-grid .form-group {
    padding: 15px;
    border: 1px solid #E1E6E3;
    border-radius: 9px;
    background: #FAFBFA;
}

.lgu-adm-page .uops-academic-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E9ECEA;
}

.lgu-adm-page .uops-academic-card .uops-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lgu-adm-page .uops-summary-label {
    margin: 0 0 4px;
    color: #8B9591;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.lgu-adm-page .uops-academic-title-row {
    width: min(100%, 270px);
}

.lgu-adm-page .uops-academic-title-select {
    font-weight: 650;
}

.lgu-adm-page .uops-academic-status {
    padding: 5px 8px;
    border-radius: 999px;
    background: #FFF0ED;
    color: #A94132;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.lgu-adm-page .uops-academic-status.is-complete {
    background: #E8F5EE;
    color: #21734F;
}

.lgu-adm-page .uops-army-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: 13px;
}

.lgu-adm-page .uops-army-panel[hidden] {
    display: none;
}

.lgu-adm-page .uops-army-panel__header h4 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
}

.lgu-adm-page .uops-army-panel__header p {
    margin: 0;
    color: var(--portal-muted);
    font-size: 10px;
}

.lgu-adm-page .uops-program-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 140px auto;
    gap: 8px;
    align-items: start;
    margin-bottom: 8px;
    padding: 9px;
    border: 1px solid #E1E6E3;
    border-radius: 8px;
    background: #FAFBFA;
}

.lgu-adm-page .uops-subject-rows {
    display: grid;
    gap: 7px;
    margin-bottom: 9px;
}

.lgu-adm-page .uops-subject-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 0.75fr) 105px 38px;
    gap: 7px;
    align-items: start;
}

.lgu-adm-page .uops-subject-custom {
    display: none;
}

.lgu-adm-page .uops-subject-row.is-custom .uops-subject-custom {
    display: block;
}

.lgu-adm-page .uops-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 8px;
    padding: 10px 11px;
    border: 1px solid #E1E6E3;
    border-radius: 8px;
    background: #FAFBFA;
    color: #43514C;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
}

.lgu-adm-page .uops-check input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--portal-green);
}

.lgu-adm-page #uops-document-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lgu-adm-page #uops-upload-status {
    margin-top: 10px;
    padding: 10px 11px;
    border: 1px solid #DCE6E2;
    border-radius: 8px;
    background: #F5F9F7;
    color: #52635C;
    font-size: 10px;
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 992px) {

    .lgu-adm-page .lgu-topbar__inner,
    .lgu-adm-page .lgu-apply-shell,
    .lgu-adm-page .lgu-workspace {
        width: min(100% - 30px, 860px);
    }

    .lgu-adm-page .lgu-apply-workspace,
    .lgu-adm-page .lgu-workspace {
        grid-template-columns: 1fr;
    }

    .lgu-adm-page .lgu-sidebar {
        position: static;
    }

    .lgu-adm-page .uops-step-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lgu-adm-page .uops-step-nav button {
        grid-template-columns: 1fr;
        justify-items: center;
        min-height: 66px;
        padding: 7px 5px;
        text-align: center;
    }

    .lgu-adm-page .uops-step-nav button.active::before {
        left: 10px;
        right: 10px;
        top: auto;
        bottom: -1px;
        width: auto;
        height: 3px;
        border-radius: 999px 999px 0 0;
    }

    .lgu-adm-page .uops-step-nav small {
        display: none;
    }

    .lgu-adm-page .uops-academic-card .uops-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .lgu-adm-page .lgu-topbar__inner {
        min-height: 62px;
    }

    .lgu-adm-page .lgu-topbar__logo {
        max-width: 138px;
        height: 32px;
    }

    .lgu-adm-page .lgu-topbar__portal-label,
    .lgu-adm-page .lgu-topbar__divider,
    .lgu-adm-page .lgu-topbar__nav>div>span {
        display: none;
    }

    .lgu-adm-page .lgu-topbar__nav {
        gap: 6px !important;
    }

    .lgu-adm-page .lgu-topbar__avatar {
        display: none;
    }

    .lgu-adm-page .lgu-topbar__inner,
    .lgu-adm-page .lgu-apply-shell,
    .lgu-adm-page .lgu-workspace {
        width: calc(100% - 22px);
    }

    .lgu-adm-page .lgu-apply-intro {
        padding: 24px 0 17px;
    }

    .lgu-adm-page .lgu-apply-intro h1 {
        font-size: 29px;
    }

    .lgu-adm-page .lgu-application-strip {
        grid-template-columns: 1fr;
    }

    .lgu-adm-page .lgu-application-strip__item+.lgu-application-strip__item {
        border-top: 1px solid #E6EBE8;
        border-left: 0;
    }

    .lgu-adm-page .uops-step-nav {
        display: flex;
        gap: 5px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .lgu-adm-page .uops-step-nav::-webkit-scrollbar {
        display: none;
    }

    .lgu-adm-page .uops-step-nav button {
        flex: 0 0 112px;
        min-height: 62px;
    }

    .lgu-adm-page .lgu-action-bar {
        flex-direction: column;
        padding: 15px;
    }

    .lgu-adm-page .lgu-action-bar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .lgu-adm-page .lgu-action-bar__actions .lgu-btn {
        width: 100%;
        white-space: normal;
    }

    .lgu-adm-page .uops-step-panel {
        padding: 16px 14px;
    }

    .lgu-adm-page .uops-step-panel .uops-grid,
    .lgu-adm-page .uops-academic-card .uops-grid,
    .lgu-adm-page #uops-document-grid,
    .lgu-adm-page .uops-program-row,
    .lgu-adm-page .uops-subject-row {
        grid-template-columns: 1fr;
    }

    .lgu-adm-page .uops-step-footer .lgu-btn,
    .lgu-adm-page .uops-step-footer .btn {
        width: 100%;
    }

    .lgu-adm-page .lgu-input,
    .lgu-adm-page .lgu-select,
    .lgu-adm-page .form-control {
        height: 44px;
        min-height: 44px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lgu-adm-page *,
    .lgu-adm-page *::before,
    .lgu-adm-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================================
   FINAL APPLY PAGE CLEANUP
   Removes duplicated information and tightens the highlighted UI areas.
   ========================================================================= */

/* The LGU logo already contains the university identity; no duplicate portal label. */
.lgu-adm-page .lgu-topbar__brand {
    gap: 0;
}

.lgu-adm-page .lgu-topbar__logo {
    max-width: 184px;
    height: 40px;
}

/* Two-item summary strip: ID + progress only. */
.lgu-adm-page .lgu-application-strip {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 1.35fr);
}

.lgu-adm-page .lgu-application-strip__item {
    padding: 13px 17px;
}

.lgu-adm-page .lgu-application-strip__progress {
    align-items: center;
}

/* Cleaner workflow card with only the two actions that belong here. */
.lgu-adm-page .lgu-action-bar {
    align-items: center;
    padding: 16px 18px;
}

.lgu-adm-page .lgu-action-bar__copy {
    max-width: 680px;
}

.lgu-adm-page .lgu-action-bar__copy h2 {
    font-size: 19px;
}

.lgu-adm-page .lgu-action-bar__actions {
    flex: 0 0 auto;
    gap: 8px;
}

.lgu-adm-page .lgu-action-bar__actions .lgu-btn {
    min-width: 112px;
}

/* Real system errors stay visible, but no longer become a huge yellow band. */
.lgu-adm-page .uops-message {
    width: fit-content;
    max-width: 100%;
    margin: -2px 0 12px;
    padding: 7px 10px;
    border: 1px solid #E8DDBE;
    border-left: 3px solid #C79A3A;
    border-radius: 7px;
    background: #FFFDF7;
    color: #725B24;
    font-size: 10px;
    font-weight: 550;
    line-height: 1.4;
}

/* Keep the form visually closer to the compact auth page. */
.lgu-adm-page .uops-step-panel {
    padding: 18px;
}

.lgu-adm-page .lgu-apply-intro {
    padding-bottom: 20px;
}

@media (max-width: 720px) {
    .lgu-adm-page .lgu-application-strip {
        grid-template-columns: 1fr;
    }

    .lgu-adm-page .lgu-action-bar {
        align-items: stretch;
    }

    .lgu-adm-page .lgu-action-bar__actions {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================================================
   FINAL MOBILE TOPBAR FIX
   Keeps the full LGU logo from colliding with Application Status / Logout.
   These rules intentionally come last so desktop cleanup rules cannot
   override the mobile logo dimensions.
   ========================================================================= */

@media (max-width: 720px) {
    .lgu-adm-page .lgu-topbar__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center !important;
        gap: 8px;
        width: calc(100% - 20px);
        min-height: 62px;
        padding: 8px 0;
    }

    .lgu-adm-page .lgu-topbar__brand {
        min-width: 0;
        overflow: hidden;
    }

    .lgu-adm-page .lgu-topbar__logo {
        display: block;
        width: 100%;
        max-width: 138px;
        height: 32px;
        object-fit: contain;
        object-position: left center;
    }

    .lgu-adm-page .lgu-topbar__nav {
        display: flex !important;
        flex: 0 0 auto;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0;
        margin-left: 0 !important;
    }

    .lgu-adm-page .lgu-topbar__nav>div {
        gap: 2px !important;
    }

    .lgu-adm-page #lgu-track-btn {
        min-height: 32px;
        padding: 0 8px;
        font-size: 9px;
    }

    .lgu-adm-page .lgu-portal-logout-form .lgu-btn {
        min-height: 32px;
        padding: 0 6px;
        font-size: 9px;
    }

    .lgu-adm-page .lgu-topbar__divider,
    .lgu-adm-page .lgu-topbar__avatar,
    .lgu-adm-page .lgu-topbar__nav>div>span {
        display: none !important;
    }
}

@media (max-width: 390px) {
    .lgu-adm-page .lgu-topbar__logo {
        max-width: 122px;
    }

    .lgu-adm-page #lgu-track-btn {
        padding: 0 6px;
        font-size: 8px;
    }
}

/* =========================================================================
   ALL-STEP VALIDATION UI
   Academic cross-field rules, document requirements, and declarations.
   ========================================================================= */

.lgu-adm-page .uops-academic-group-error {
    margin-top: 7px;
    padding: 8px 10px;
    border-left: 3px solid #D92D20;
    border-radius: 6px;
    background: #FFFBFA;
    color: #B42318;
    font-size: 10px;
    font-weight: 550;
    line-height: 1.4;
}

.lgu-adm-page .uops-subject-rows.has-error {
    padding: 8px;
    border: 1px solid rgba(217, 45, 32, 0.35);
    border-radius: 8px;
    background: rgba(255, 251, 250, 0.72);
}

.lgu-adm-page .lgu-upload {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 13px;
    border: 1px solid #E1E6E3;
    border-radius: 9px;
    background: #FAFBFA;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.lgu-adm-page .lgu-upload.has-error {
    border-color: rgba(217, 45, 32, 0.55);
    background: #FFFBFA;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.05);
}

.lgu-adm-page .lgu-upload-label {
    margin: 0 0 7px;
    color: #34423D;
    font-size: 10px;
    font-weight: 650;
}

.lgu-adm-page .lgu-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.lgu-adm-page .lgu-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 132px;
    padding: 16px;
    border: 1px dashed #BAC8C2;
    border-radius: 8px;
    background: #FFFFFF;
    color: #5D6C66;
    text-align: center;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.lgu-adm-page .lgu-dropzone:hover,
.lgu-adm-page .lgu-dropzone:focus-visible,
.lgu-adm-page .lgu-dropzone.is-dragover {
    border-color: #00785B;
    background: #F4FAF7;
    box-shadow: 0 0 0 3px rgba(0, 120, 91, 0.07);
    outline: none;
}

.lgu-adm-page .lgu-upload.has-error .lgu-dropzone {
    border-color: #D92D20;
    background: #FFFBFA;
}

.lgu-adm-page .lgu-upload-icon {
    width: 28px;
    height: 28px;
    color: #00785B;
}

.lgu-adm-page .lgu-upload-icon svg {
    width: 100%;
    height: 100%;
}

.lgu-adm-page .lgu-dropzone-text {
    color: #34423D;
    font-size: 10px;
    font-weight: 650;
}

.lgu-adm-page .lgu-dropzone-hint {
    color: #84908B;
    font-size: 9px;
    line-height: 1.4;
}

.lgu-adm-page .lgu-upload-error-msg,
.lgu-adm-page .uops-declaration-error {
    margin-top: 5px;
    color: #B42318;
    font-size: 9px;
    font-weight: 550;
    line-height: 1.4;
}

.lgu-adm-page .uops-check.has-error {
    border-color: rgba(217, 45, 32, 0.55);
    background: #FFFBFA;
    color: #7A271A;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.04);
}

.lgu-adm-page .uops-check.has-error input[type="checkbox"] {
    outline: 2px solid rgba(217, 45, 32, 0.20);
    outline-offset: 2px;
}

.lgu-adm-page .uops-upload-preview {
    margin-top: 9px;
}

.lgu-adm-page .lgu-upload-preview-card {
    padding: 10px;
    border: 1px solid #DCE5E1;
    border-radius: 8px;
    background: #FFFFFF;
}

.lgu-adm-page .lgu-upload-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lgu-adm-page .lgu-upload-thumbnail {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border-radius: 7px;
    background: #EEF4F1;
    color: #00785B;
}

.lgu-adm-page .lgu-upload-thumbnail svg {
    width: 22px;
    height: 22px;
}

.lgu-adm-page .lgu-upload-meta {
    min-width: 0;
}

.lgu-adm-page .lgu-upload-filename {
    overflow: hidden;
    color: #34423D;
    font-size: 10px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lgu-adm-page .lgu-upload-status {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    color: #21734F;
    font-size: 9px;
    font-weight: 550;
}

.lgu-adm-page .lgu-upload-status svg {
    width: 12px;
    height: 12px;
}

.lgu-adm-page .lgu-upload-actions {
    display: flex;
    gap: 7px;
    margin-top: 9px;
}

.lgu-adm-page .lgu-btn-outline {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid #CAD7D2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #315047;
    font-size: 9px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.lgu-adm-page .lgu-btn-outline:hover {
    border-color: #9FB9AF;
    background: #F4F8F6;
    color: #005D47;
    text-decoration: none;
}

/* =========================================================================
   LGU ADMISSIONS PAYMENT PAGE — COHESIVE PAPER MINIMAL UI
   Uses the same visual language as Login / Registration / Apply.
   ========================================================================= */

body.uops-admissions-payment-body {
    margin: 0;
    background: #FAF9F6;
    color: #17201D;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.lgu-payment-page {
    min-height: 100dvh;
}

.lgu-payment-page .lgu-payment-intro {
    padding: 34px 0 20px;
}

.lgu-payment-page .lgu-payment-intro__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
}

.lgu-payment-page .lgu-payment-intro__copy {
    max-width: 760px;
    min-width: 0;
}

.lgu-payment-page .lgu-payment-intro h1 {
    margin: 0 0 9px;
    color: #17201D;
    font-size: clamp(31px, 3vw, 43px);
    font-weight: 720;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.lgu-payment-page .lgu-payment-intro h1 span {
    color: #00785B;
}

.lgu-payment-page .lgu-payment-intro__copy>p {
    max-width: 680px;
    margin: 0;
    color: #68716D;
    font-size: 13px;
    line-height: 1.6;
}

.lgu-payment-page .lgu-payment-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 280px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #CEE2DA;
    border-radius: 999px;
    background: #F4FAF7;
    color: #315047;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
}

.lgu-payment-page .lgu-payment-status-pill__dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #A6CE39;
    box-shadow: 0 0 0 4px rgba(166, 206, 57, 0.12);
}

.lgu-payment-page .lgu-payment-context-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid #DDE4E0;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.lgu-payment-page .lgu-payment-context-strip__item {
    min-width: 0;
    padding: 13px 16px;
}

.lgu-payment-page .lgu-payment-context-strip__item+.lgu-payment-context-strip__item {
    border-left: 1px solid #E6EBE8;
}

.lgu-payment-page .lgu-payment-context-strip__item span {
    display: block;
    margin-bottom: 5px;
    color: #88928E;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.lgu-payment-page .lgu-payment-context-strip__item strong {
    display: block;
    overflow: hidden;
    color: #17201D;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lgu-payment-page .lgu-payment-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #E7D9B5;
    border-left: 3px solid #C6932F;
    border-radius: 8px;
    background: #FFFDF7;
    color: #684F1B;
}

.lgu-payment-page .lgu-payment-notice__icon {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: #FFF7DE;
    color: #A8700F;
}

.lgu-payment-page .lgu-payment-notice strong {
    display: block;
    margin: 0 0 3px;
    color: #5D4516;
    font-size: 11px;
    font-weight: 700;
}

.lgu-payment-page .lgu-payment-notice p {
    margin: 0;
    color: #795F2C;
    font-size: 10px;
    line-height: 1.5;
}

.lgu-payment-page .lgu-payment-message {
    display: none;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 550;
    line-height: 1.45;
}

.lgu-payment-page .lgu-payment-message:not(:empty) {
    display: block;
}

.lgu-payment-page .lgu-payment-message.is-error {
    border-color: #E8C7C2;
    border-left-color: #D92D20;
    background: #FFFBFA;
    color: #B42318;
}

.lgu-payment-page .lgu-payment-message.is-success {
    border-color: #CDE4D8;
    border-left-color: #21734F;
    background: #F4FAF7;
    color: #216044;
}

.lgu-payment-page .lgu-payment-message.is-info {
    border-color: #D6E2DD;
    border-left-color: #00785B;
    background: #F5F9F7;
    color: #315047;
}

.lgu-payment-page .lgu-payment-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
    padding-bottom: 48px;
}

.lgu-payment-page .lgu-payment-main {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.lgu-payment-page .lgu-payment-sidebar {
    position: sticky;
    top: 88px;
    min-width: 0;
}

.lgu-payment-page .lgu-payment-card,
.lgu-payment-page .lgu-payment-upload-card {
    overflow: hidden;
    border: 1px solid #DDE4E0;
    border-radius: 11px;
    background-color: rgba(255, 255, 255, 0.94);
    background-image:
        linear-gradient(to right, rgba(82, 92, 87, 0.012) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(82, 92, 87, 0.012) 1px, transparent 1px);
    background-size: 5px 5px;
    box-shadow: 0 8px 24px rgba(23, 32, 29, 0.045);
}

.lgu-payment-page .lgu-payment-card {
    padding: 18px;
}

.lgu-payment-page .lgu-payment-upload-card {
    padding: 17px;
}

.lgu-payment-page .lgu-payment-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
}

.lgu-payment-page .lgu-payment-card__header-copy {
    min-width: 0;
}

.lgu-payment-page .lgu-payment-card__eyebrow {
    margin: 0 0 6px;
    color: #00785B;
    font-size: 9px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lgu-payment-page .lgu-payment-card h2,
.lgu-payment-page .lgu-payment-upload-card h2 {
    margin: 0;
    color: #17201D;
    font-size: 18px;
    font-weight: 710;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.lgu-payment-page .lgu-payment-card__text,
.lgu-payment-page .lgu-payment-upload-card>p {
    margin: 8px 0 0;
    color: #68716D;
    font-size: 10px;
    line-height: 1.55;
}

.lgu-payment-page .lgu-payment-state-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #FFF6E5;
    color: #8A6115;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.lgu-payment-page .lgu-payment-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #E3E8E5;
    border-radius: 9px;
    background: rgba(250, 251, 250, 0.88);
}

.lgu-payment-page .lgu-payment-meta-item {
    min-width: 0;
    padding: 12px 13px;
    border-right: 1px solid #E7EBE9;
    border-bottom: 1px solid #E7EBE9;
}

.lgu-payment-page .lgu-payment-meta-item:nth-child(3n) {
    border-right: 0;
}

.lgu-payment-page .lgu-payment-meta-item span {
    display: block;
    margin-bottom: 5px;
    color: #8A9490;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lgu-payment-page .lgu-payment-meta-item strong {
    display: block;
    overflow-wrap: anywhere;
    color: #27342F;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.4;
}

.lgu-payment-page .lgu-payment-meta-item.is-amount strong {
    color: #00785B;
    font-size: 17px;
    font-weight: 750;
}

.lgu-payment-page .lgu-payment-meta-item.is-reference {
    grid-column: span 2;
}

.lgu-payment-page .lgu-payment-instructions,
.lgu-payment-page .lgu-payment-success-note {
    margin-top: 13px;
    padding: 10px 11px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.5;
}

.lgu-payment-page .lgu-payment-instructions {
    border: 1px solid #DFE7E3;
    background: #F7F9F8;
    color: #52635C;
}

.lgu-payment-page .lgu-payment-instructions strong {
    display: block;
    margin-bottom: 3px;
    color: #34423D;
    font-size: 10px;
}

.lgu-payment-page .lgu-payment-instructions p {
    margin: 0;
}

.lgu-payment-page .lgu-payment-success-note {
    border: 1px solid #CFE5D9;
    background: #F3FAF6;
    color: #216044;
}

.lgu-payment-page .lgu-payment-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.lgu-payment-page .lgu-payment-resource-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 13px;
    border: 1px solid #E3E8E5;
    border-radius: 9px;
    background: #FAFBFA;
}

.lgu-payment-page .lgu-payment-resource-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 9px;
    background: #EAF5F1;
    color: #00785B;
}

.lgu-payment-page .lgu-payment-resource-icon svg {
    width: 21px;
    height: 21px;
}

.lgu-payment-page .lgu-payment-resource-copy {
    min-width: 0;
}

.lgu-payment-page .lgu-payment-resource-copy strong {
    display: block;
    margin-bottom: 4px;
    color: #27342F;
    font-size: 11px;
    font-weight: 700;
}

.lgu-payment-page .lgu-payment-resource-copy p {
    margin: 0;
    color: #76817D;
    font-size: 9px;
    line-height: 1.45;
}

.lgu-payment-page .lgu-payment-file-upload {
    margin-top: 15px;
}

.lgu-payment-page .lgu-payment-dropzone {
    min-height: 138px;
}

.lgu-payment-page .lgu-payment-selected-file {
    margin-top: 8px;
    padding: 8px 10px;
    overflow: hidden;
    border: 1px solid #E2E8E5;
    border-radius: 7px;
    background: #F8FAF9;
    color: #89938F;
    font-size: 9px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lgu-payment-page .lgu-payment-selected-file.has-file {
    border-color: #CDE2D9;
    background: #F3F9F6;
    color: #315047;
}

.lgu-payment-page .lgu-payment-upload-button {
    width: 100%;
    margin-top: 10px;
}

.lgu-payment-page .lgu-payment-upload-button:disabled {
    cursor: wait;
}

.lgu-payment-page .lgu-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 992px) {
    .lgu-payment-page .lgu-payment-workspace {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .lgu-payment-page .lgu-payment-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lgu-payment-page .lgu-payment-meta-item:nth-child(3n) {
        border-right: 1px solid #E7EBE9;
    }

    .lgu-payment-page .lgu-payment-meta-item:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 760px) {
    .lgu-payment-page .lgu-payment-intro {
        padding: 24px 0 17px;
    }

    .lgu-payment-page .lgu-payment-intro__top {
        flex-direction: column;
        gap: 13px;
    }

    .lgu-payment-page .lgu-payment-intro h1 {
        font-size: 29px;
    }

    .lgu-payment-page .lgu-payment-status-pill {
        max-width: 100%;
    }

    .lgu-payment-page .lgu-payment-context-strip {
        grid-template-columns: 1fr;
    }

    .lgu-payment-page .lgu-payment-context-strip__item+.lgu-payment-context-strip__item {
        border-top: 1px solid #E6EBE8;
        border-left: 0;
    }

    .lgu-payment-page .lgu-payment-workspace {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .lgu-payment-page .lgu-payment-sidebar {
        position: static;
    }

    .lgu-payment-page .lgu-payment-meta-grid {
        grid-template-columns: 1fr;
    }

    .lgu-payment-page .lgu-payment-meta-item,
    .lgu-payment-page .lgu-payment-meta-item:nth-child(2n),
    .lgu-payment-page .lgu-payment-meta-item:nth-child(3n) {
        border-right: 0;
    }

    .lgu-payment-page .lgu-payment-meta-item.is-reference {
        grid-column: auto;
    }

    .lgu-payment-page .lgu-payment-resource-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .lgu-payment-page .lgu-payment-resource-row .lgu-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .lgu-payment-page .lgu-payment-card,
    .lgu-payment-page .lgu-payment-upload-card {
        padding: 15px;
    }
}


/* =========================================================================
   LGU UNIFIED AUTHENTICATED PORTAL — FINAL COORDINATED PASS
   Applies to Portal Home, Status, Corrections, Entry Test, Logout and exam slips.
   ========================================================================= */

body.uops-admissions-portal-body,
.lgu-portal-page,
.lgu-exam-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.lgu-portal-page {
    --portal-green: #00785B;
    --portal-green-dark: #005D47;
    --portal-lime: #A6CE39;
    --portal-ink: #17201D;
    --portal-muted: #68716D;
    --portal-border: #DCE3DF;
    --portal-paper: #FAF9F6;
    min-height: 100dvh;
    background-color: var(--portal-paper);
    background-image:
        linear-gradient(to right, rgba(82, 92, 87, .016) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(82, 92, 87, .016) 1px, transparent 1px);
    background-size: 5px 5px;
}

.lgu-portal-shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding-bottom: 48px;
}

.lgu-page-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding: 38px 0 24px;
}

.lgu-page-intro__copy {
    max-width: 800px;
}

.lgu-page-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: var(--portal-green);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lgu-page-eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--portal-lime);
    box-shadow: 0 0 0 4px rgba(166, 206, 57, .12);
}

.lgu-page-intro h1 {
    margin: 0 0 9px;
    color: var(--portal-ink);
    font-size: clamp(32px, 3.2vw, 46px);
    line-height: 1.04;
    letter-spacing: -.045em;
    font-weight: 750;
}

.lgu-page-intro h1 em {
    color: var(--portal-green);
    font-style: normal;
}

.lgu-page-intro p {
    margin: 0;
    max-width: 720px;
    color: var(--portal-muted);
    font-size: 13px;
    line-height: 1.65;
}

.lgu-page-intro__action {
    flex: 0 0 auto;
    margin-top: 22px;
}

.lgu-portal-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #D9E5E0;
    border-left: 3px solid var(--portal-green);
    border-radius: 9px;
    background: rgba(255, 255, 255, .92);
}

.lgu-portal-notice__dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--portal-lime);
}

.lgu-portal-notice strong {
    display: block;
    margin-bottom: 2px;
    color: var(--portal-ink);
    font-size: 11px;
}

.lgu-portal-notice p {
    margin: 0;
    color: var(--portal-muted);
    font-size: 10px;
    line-height: 1.5;
}

.lgu-portal-card {
    border: 1px solid var(--portal-border);
    border-radius: 11px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 24px rgba(23, 32, 29, .045);
}

.lgu-card-kicker {
    display: block;
    margin-bottom: 7px;
    color: var(--portal-green);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.lgu-portal-card h2 {
    margin: 0 0 7px;
    color: var(--portal-ink);
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.lgu-portal-card p {
    margin: 0;
    color: var(--portal-muted);
    font-size: 11px;
    line-height: 1.6;
}

.lgu-btn--full {
    width: 100%;
}

.lgu-dashboard-stats,
.lgu-status-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid var(--portal-border);
    border-radius: 11px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 24px rgba(23, 32, 29, .04);
}

.lgu-status-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lgu-dashboard-stat,
.lgu-status-overview article {
    min-width: 0;
    padding: 15px 17px;
}

.lgu-dashboard-stat+.lgu-dashboard-stat,
.lgu-status-overview article+article {
    border-left: 1px solid #E8ECEA;
}

.lgu-dashboard-stat span,
.lgu-status-overview span {
    display: block;
    margin-bottom: 5px;
    color: #8A9490;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.lgu-dashboard-stat strong,
.lgu-status-overview strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--portal-ink);
    font-size: 13px;
    line-height: 1.4;
}

.lgu-dashboard-stat strong.is-accent,
.lgu-status-overview strong.is-accent {
    color: var(--portal-green);
    font-size: 20px;
}

.lgu-mini-progress {
    height: 4px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #DFE8E4;
}

.lgu-mini-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--portal-green);
}

.lgu-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

.lgu-portal-card--main {
    padding: 18px;
}

.lgu-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}

.lgu-card-heading span {
    color: var(--portal-green);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.lgu-card-heading h2 {
    margin-top: 4px;
}

.lgu-card-heading>p {
    max-width: 360px;
    font-size: 10px;
}

.lgu-next-step-card {
    position: sticky;
    top: 88px;
    padding: 18px;
}

.lgu-next-step-card .lgu-btn {
    margin-top: 16px;
}

.lgu-journey-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.lgu-journey-card {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 10px 11px;
    border: 1px solid #E1E7E4;
    border-radius: 9px;
    background: #FAFBFA;
    color: #34423D;
    text-decoration: none;
    transition: .16s ease;
}

.lgu-journey-card:hover {
    border-color: #B9CEC5;
    background: #F4F8F6;
    color: var(--portal-green-dark);
    text-decoration: none;
    transform: translateY(-1px);
}

.lgu-journey-card.is-active {
    border-color: #CBE2D9;
    background: #EDF7F3;
}

.lgu-journey-card__index {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid #CED9D4;
    border-radius: 50%;
    background: #FFF;
    font-size: 10px;
    font-weight: 700;
}

.lgu-journey-card.is-active .lgu-journey-card__index {
    border-color: var(--portal-green);
    background: var(--portal-green);
    color: #FFF;
}

.lgu-journey-card strong {
    display: block;
    font-size: 11px;
}

.lgu-journey-card small {
    display: block;
    margin-top: 2px;
    color: #89938F;
    font-size: 9px;
}

.lgu-journey-card__arrow {
    color: #8A9490;
}

.lgu-inline-message {
    display: none;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: 7px;
    font-size: 10px;
    line-height: 1.45;
}

.lgu-inline-message:not(:empty) {
    display: block;
}

.lgu-inline-message.is-error {
    border-color: #E9CBC6;
    border-left-color: #D92D20;
    background: #FFFBFA;
    color: #B42318;
}

.lgu-inline-message.is-success {
    border-color: #CFE5D9;
    border-left-color: #21734F;
    background: #F4FAF7;
    color: #216044;
}

.lgu-status-layout,
.lgu-corrections-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

.lgu-status-main,
.lgu-corrections-main {
    display: grid;
    gap: 14px;
}

.lgu-status-actions,
.lgu-correction-action-card {
    position: sticky;
    top: 88px;
    padding: 18px;
}

.lgu-action-stack {
    display: grid;
    gap: 8px;
    margin-top: 15px;
}

.lgu-current-status-card,
.lgu-refund-card,
.lgu-correction-card,
.lgu-test-card,
.lgu-empty-state {
    padding: 20px;
}

.lgu-status-next-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    padding: 12px;
    border: 1px solid #DDE7E3;
    border-radius: 9px;
    background: #F7FAF8;
}

.lgu-status-next-action span {
    display: block;
    color: #8A9490;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
}

.lgu-status-next-action strong {
    display: block;
    margin-top: 3px;
    color: var(--portal-ink);
    font-size: 12px;
}

.lgu-refund-card textarea {
    margin: 14px 0 4px;
}

.lgu-refund-card .lgu-btn {
    margin-top: 10px;
}

.lgu-field-error-text {
    min-height: 15px;
    color: #B42318;
    font-size: 9px;
}

.lgu-correction-detail {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #E3E8E5;
    border-radius: 8px;
    background: #FAFBFA;
}

.lgu-correction-detail span {
    display: block;
    margin-bottom: 5px;
    color: #8A9490;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lgu-correction-detail strong {
    color: #34423D;
    font-size: 11px;
    line-height: 1.55;
}

.lgu-correction-card .lgu-btn {
    margin-top: 15px;
}

.lgu-empty-state {
    text-align: center;
}

.lgu-empty-state__icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    place-items: center;
    border-radius: 50%;
    background: #EAF5F1;
    color: var(--portal-green);
    font-weight: 800;
}

.lgu-empty-state h2 {
    margin-bottom: 7px;
}

.lgu-empty-state p {
    max-width: 520px;
    margin: 0 auto;
}

.lgu-test-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.lgu-test-card>div {
    max-width: 700px;
}

.lgu-logout-shell {
    display: grid;
    min-height: calc(100dvh - 74px);
    place-items: center;
}

.lgu-logout-card {
    width: min(460px, 100%);
    padding: 28px;
    text-align: center;
}

.lgu-logout-card h1 {
    margin: 0 0 8px;
    font-size: 27px;
    letter-spacing: -.035em;
}

.lgu-logout-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 20px;
}

/* Authenticated header final responsive guard */
.lgu-portal-page .lgu-topbar__account {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lgu-portal-page .lgu-topbar__name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4B5B55;
    font-size: 11px;
    font-weight: 650;
}

.lgu-topbar.is-scrolled {
    box-shadow: 0 8px 28px rgba(23, 32, 29, .08);
}

/* Exam document family */
.lgu-exam-page {
    min-height: 100dvh;
    padding: 34px 20px 50px;
    background: #F5F7F6;
    color: #17201D;
}

.lgu-exam-shell {
    width: min(940px, 100%);
    margin: 0 auto;
}

.lgu-exam-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding: 17px 20px;
    border: 1px solid #DCE3DF;
    border-top: 3px solid #00785B;
    border-radius: 11px;
    background: #FFF;
}

.lgu-exam-header img {
    width: 180px;
    height: 42px;
    object-fit: contain;
    object-position: left center;
}

.lgu-exam-header>div {
    flex: 1;
}

.lgu-exam-header span {
    display: block;
    color: #00785B;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
}

.lgu-exam-header h1 {
    margin: 3px 0 0;
    font-size: 23px;
    letter-spacing: -.03em;
}

.lgu-exam-card {
    padding: 24px;
    border: 1px solid #DCE3DF;
    border-radius: 11px;
    background: #FFF;
    box-shadow: 0 10px 30px rgba(23, 32, 29, .05);
}

.lgu-exam-title-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-bottom: 17px;
    border-bottom: 1px solid #E7ECE9;
}

.lgu-exam-title-row span,
.lgu-exam-meta-grid span,
.lgu-exam-list-item span {
    display: block;
    margin-bottom: 4px;
    color: #89938F;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lgu-exam-title-row strong {
    font-size: 16px;
}

.lgu-exam-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 18px 0 24px;
    overflow: hidden;
    border: 1px solid #E3E8E5;
    border-radius: 9px;
    background: #E3E8E5;
}

.lgu-exam-meta-grid>div {
    padding: 12px;
    background: #FAFBFA;
}

.lgu-exam-meta-grid strong {
    overflow-wrap: anywhere;
    font-size: 11px;
}

.lgu-exam-card>h2,
.lgu-exam-instructions h2 {
    font-size: 17px;
}

.lgu-exam-table-wrap {
    overflow-x: auto;
    border: 1px solid #E1E7E4;
    border-radius: 9px;
}

.lgu-exam-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

.lgu-exam-table th {
    padding: 10px;
    background: #F3F7F5;
    color: #50615A;
    text-align: left;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.lgu-exam-table td {
    padding: 11px 10px;
    border-top: 1px solid #E7ECE9;
}

.lgu-exam-instructions {
    margin-top: 20px;
    padding: 15px 17px;
    border-left: 3px solid #00785B;
    border-radius: 8px;
    background: #F5F9F7;
}

.lgu-exam-instructions ul {
    margin: 9px 0 0;
    padding-left: 18px;
    color: #52635C;
    font-size: 10px;
    line-height: 1.65;
}

.lgu-exam-back {
    margin-top: 14px;
}

.lgu-exam-list {
    display: grid;
    gap: 10px;
}

.lgu-exam-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 18px;
    border: 1px solid #DCE3DF;
    border-left: 3px solid #00785B;
    border-radius: 10px;
    background: #FFF;
    color: #17201D;
    text-decoration: none;
    box-shadow: 0 7px 22px rgba(23, 32, 29, .04);
    transition: .16s ease;
}

.lgu-exam-list-item:hover {
    transform: translateY(-1px);
    border-color: #BBD0C7;
    text-decoration: none;
}

.lgu-exam-list-item h2 {
    margin: 0 0 4px;
    font-size: 16px;
}

.lgu-exam-list-item p {
    margin: 0;
    color: #68716D;
    font-size: 10px;
}

.lgu-exam-list-item__meta {
    text-align: right;
}

.lgu-exam-list-item__meta strong,
.lgu-exam-list-item__meta span,
.lgu-exam-list-item__meta em {
    display: block;
}

.lgu-exam-list-item__meta strong {
    color: #00785B;
    font-size: 10px;
}

.lgu-exam-list-item__meta span {
    margin-top: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.lgu-exam-list-item__meta em {
    margin-top: 8px;
    color: #315047;
    font-size: 10px;
    font-style: normal;
    font-weight: 650;
}

@media (max-width: 900px) {

    .lgu-dashboard-grid,
    .lgu-status-layout,
    .lgu-corrections-layout {
        grid-template-columns: 1fr;
    }

    .lgu-next-step-card,
    .lgu-status-actions,
    .lgu-correction-action-card {
        position: static;
    }

    .lgu-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lgu-dashboard-stat:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #E8ECEA;
    }

    .lgu-dashboard-stat:nth-child(4) {
        border-top: 1px solid #E8ECEA;
    }
}

@media (max-width: 720px) {
    .lgu-portal-shell {
        width: calc(100% - 22px);
    }

    .lgu-page-intro {
        flex-direction: column;
        gap: 12px;
        padding: 24px 0 18px;
    }

    .lgu-page-intro h1 {
        font-size: 30px;
    }

    .lgu-page-intro__action {
        width: 100%;
        margin-top: 0;
    }

    .lgu-status-overview {
        grid-template-columns: 1fr;
    }

    .lgu-status-overview article+article {
        border-left: 0;
        border-top: 1px solid #E8ECEA;
    }

    .lgu-journey-grid {
        grid-template-columns: 1fr;
    }

    .lgu-card-heading {
        flex-direction: column;
    }

    .lgu-test-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .lgu-test-card .lgu-btn {
        width: 100%;
    }

    .lgu-topbar__name,
    .lgu-topbar__avatar {
        display: none !important;
    }

    .lgu-topbar__account {
        gap: 2px !important;
    }

    .lgu-topbar__logo {
        max-width: 128px !important;
        height: 31px !important;
    }

    .lgu-topbar__status-link {
        min-height: 31px !important;
        padding: 0 7px !important;
        font-size: 8px !important;
    }

    .lgu-portal-logout-form .lgu-btn {
        min-height: 31px !important;
        padding: 0 6px !important;
        font-size: 8px !important;
    }

    .lgu-exam-page {
        padding: 16px 10px 35px;
    }

    .lgu-exam-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .lgu-exam-header img {
        width: 145px;
    }

    .lgu-exam-header .lgu-btn {
        width: 100%;
    }

    .lgu-exam-meta-grid {
        grid-template-columns: 1fr;
    }

    .lgu-exam-title-row {
        grid-template-columns: 1fr;
    }

    .lgu-exam-list-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .lgu-exam-list-item__meta {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .lgu-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .lgu-dashboard-stat+.lgu-dashboard-stat {
        border-left: 0;
        border-top: 1px solid #E8ECEA;
    }

    .lgu-logout-actions {
        grid-template-columns: 1fr;
    }
}

@media print {
    .lgu-exam-page {
        padding: 0;
        background: #FFF;
    }

    .lgu-exam-shell {
        width: 100%;
    }

    .lgu-exam-header,
    .lgu-exam-card {
        box-shadow: none;
    }

    .d-print-none {
        display: none !important;
    }
}

/* =========================================================================
   CORRECTION REQUEST NOTIFICATION BADGE
   Shared authenticated topbar notification.
   ========================================================================= */

.lgu-topbar__status-link {
    position: relative;
    overflow: visible;
}

.lgu-topbar__status-link>span:first-child {
    display: inline-block;
}

.lgu-topbar__notification-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    background: #D92D20;
    box-shadow:
        0 3px 9px rgba(217, 45, 32, 0.25),
        0 0 0 2px rgba(217, 45, 32, 0.06);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    z-index: 3;
}

.lgu-topbar__notification-badge[hidden] {
    display: none !important;
}

.lgu-topbar__status-link.has-correction-notification {
    border-color: rgba(217, 45, 32, 0.28);
}

.lgu-topbar__status-link.has-correction-notification::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(217, 45, 32, 0.4);
    border-radius: 50%;
    pointer-events: none;
    animation: lguCorrectionBadgePulse 2s ease-out infinite;
}

@keyframes lguCorrectionBadgePulse {
    0% {
        opacity: 0.65;
        transform: scale(0.8);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(2.1);
    }
}

@media (max-width: 720px) {
    .lgu-topbar__notification-badge {
        top: -6px;
        right: -6px;
        width: 17px;
        height: 17px;
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lgu-topbar__status-link.has-correction-notification::after {
        animation: none;
    }
}

/* -------------------------------------------------------------------------
   Shared protected designer credit
   ------------------------------------------------------------------------- */
.lgu-designer-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(1180px, calc(100% - 40px));
    margin: 42px auto 0;
    padding: 18px 0 4px;
    border-top: 1px solid rgba(23, 32, 29, 0.08);
    color: #87918d;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

.lgu-designer-credit strong {
    color: #315047;
    font-weight: 650;
}

.lgu-designer-credit__divider {
    width: 3px;
    height: 3px;
    flex: 0 0 3px;
    border-radius: 50%;
    background: #a6ce39;
}

@media (max-width: 520px) {
    .lgu-designer-credit {
        flex-direction: column;
        gap: 5px;
        width: calc(100% - 24px);
        margin-top: 32px;
        padding-top: 15px;
    }

    .lgu-designer-credit__divider {
        display: none;
    }
}

@media print {
    .lgu-designer-credit {
        display: none !important;
    }
}

/* =========================================================================
   LGU APPLICANT PORTAL HEADER — 2026 CUSTOM NAVIGATION
   Replaces the generic Frappe web navbar on authenticated admissions pages.
   ========================================================================= */

body.lgu-custom-admissions-header-active {
    --lgu-header-green: #00785B;
    --lgu-header-green-dark: #005D47;
    --lgu-header-lime: #A6CE39;
    --lgu-header-ink: #17201D;
    --lgu-header-muted: #68716D;
    --lgu-header-line: #DCE3DF;
    --lgu-header-paper: #FAF9F6;
    margin: 0;
    background-color: var(--lgu-header-paper);
    background-image:
        linear-gradient(to right, rgba(82, 92, 87, 0.018) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(82, 92, 87, 0.018) 1px, transparent 1px);
    background-size: 5px 5px;
}

/* Hide the generic Frappe web navigation only after the custom header is active. */
body.lgu-custom-admissions-header-active header.navbar:not(.lgu-topbar),
body.lgu-custom-admissions-header-active nav.navbar:not(.lgu-topbar),
body.lgu-custom-admissions-header-active .web-header,
body.lgu-custom-admissions-header-active .navbar.navbar-expand-lg:not(.lgu-topbar) {
    display: none !important;
}

body.lgu-custom-admissions-header-active .web-page-content,
body.lgu-custom-admissions-header-active .page_content,
body.lgu-custom-admissions-header-active main {
    scroll-margin-top: 88px;
}

.lgu-adm-page .lgu-topbar.lgu-topbar--portal {
    position: sticky;
    top: 0;
    z-index: 1100;
    width: 100%;
    border: 0;
    border-top: 3px solid var(--lgu-header-green);
    border-bottom: 1px solid rgba(23, 32, 29, 0.08);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 5px 18px rgba(23, 32, 29, 0.04);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    opacity: 0;
    transform: translateY(-10px);
    transition:
        min-height 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.lgu-adm-page .lgu-topbar.lgu-topbar--portal.is-ready {
    animation: lguApplicantHeaderIn 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lgu-adm-page .lgu-topbar.lgu-topbar--portal.is-scrolled {
    border-bottom-color: rgba(23, 32, 29, 0.12);
    background: rgba(255, 255, 255, 0.975);
    box-shadow:
        0 12px 34px rgba(23, 32, 29, 0.09),
        0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

@keyframes lguApplicantHeaderIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 28px;
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px !important;
    min-height: 76px;
    margin: 0 auto;
    padding: 10px 0;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand:hover,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand:focus {
    color: inherit;
    text-decoration: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: 184px;
    height: 42px;
    object-fit: contain;
    object-position: left center;
    transition: transform 180ms ease;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand:hover .lgu-topbar__logo {
    transform: translateY(-1px);
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-left: 14px;
    border-left: 1px solid #E2E7E4;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand-copy strong {
    color: var(--lgu-header-ink);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand-copy span {
    color: var(--lgu-header-muted);
    font-size: 9px;
    font-weight: 550;
    line-height: 1.25;
    white-space: nowrap;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__nav {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center !important;
    gap: 16px !important;
    margin-left: auto !important;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 7px 13px 7px 11px;
    border: 1px solid #C9D8D2;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--lgu-header-ink);
    text-decoration: none;
    box-shadow: none;
    overflow: visible;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link:hover,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link:focus-visible,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link.is-active {
    border-color: rgba(0, 120, 91, 0.38);
    background: #F4F9F7;
    color: var(--lgu-header-green-dark);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 7px 17px rgba(23, 32, 29, 0.06);
    outline: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-icon {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 7px;
    background: #EAF5F1;
    color: var(--lgu-header-green);
    transition: background-color 160ms ease, transform 160ms ease;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link:hover .lgu-topbar__status-icon {
    background: #DDF0E9;
    transform: scale(1.03);
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-icon svg {
    width: 15px;
    height: 15px;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy strong {
    color: currentColor;
    font-size: 10px;
    font-weight: 720;
    line-height: 1.2;
    white-space: nowrap;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy small {
    color: var(--lgu-header-muted);
    font-size: 8px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__notification-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    background: #D92D20;
    box-shadow:
        0 5px 13px rgba(217, 45, 32, 0.28),
        0 0 0 2px rgba(217, 45, 32, 0.07);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
    pointer-events: none;
    z-index: 4;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__notification-badge[hidden] {
    display: none !important;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link.has-correction-notification {
    border-color: rgba(217, 45, 32, 0.34);
    background: #FFFBFA;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link.has-correction-notification .lgu-topbar__status-icon {
    background: #FDEDEC;
    color: #C43228;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link.has-correction-notification .lgu-topbar__status-copy small {
    color: #B42318;
    font-weight: 650;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link.has-correction-notification::after {
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(217, 45, 32, 0.44);
    border-radius: 50%;
    pointer-events: none;
    animation: lguApplicantCorrectionPulse 2s ease-out infinite;
}

@keyframes lguApplicantCorrectionPulse {
    0% {
        opacity: 0.7;
        transform: scale(0.8);
    }

    72%,
    100% {
        opacity: 0;
        transform: scale(2.25);
    }
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__account {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-left: 16px;
    border-left: 1px solid #E3E8E5;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__identity {
    display: grid;
    gap: 2px;
    max-width: 190px;
    min-width: 0;
    text-align: right;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__name {
    overflow: hidden;
    color: #35443F;
    font-size: 11px;
    font-weight: 680;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__role {
    color: #89938F;
    font-size: 8px;
    font-weight: 550;
    line-height: 1.2;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__avatar {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    margin: 0 !important;
    border: 1px solid #C7E1D7;
    border-radius: 50%;
    background:
        linear-gradient(145deg, #EAF7F2, #DDF1E9);
    color: var(--lgu-header-green-dark);
    box-shadow: 0 5px 13px rgba(0, 120, 91, 0.08);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.025em;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__account:hover .lgu-topbar__avatar {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 120, 91, 0.12);
}

.lgu-adm-page .lgu-topbar--portal .lgu-portal-logout-form {
    margin: 0 !important;
    padding: 0 !important;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #5D6A65;
    font: inherit;
    font-size: 9px;
    font-weight: 650;
    cursor: pointer;
    transition:
        color 150ms ease,
        background-color 150ms ease,
        border-color 150ms ease;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout:hover,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout:focus-visible {
    border-color: #E4D8D4;
    background: #FFF8F6;
    color: #B42318;
    outline: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout svg {
    width: 14px;
    height: 14px;
}

/* Subtle portal content entrance. */
body.lgu-custom-admissions-header-active .lgu-adm-page main>*,
body.lgu-custom-admissions-header-active .lgu-adm-page .uops-apply-shell>* {
    animation: lguApplicantContentIn 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.lgu-custom-admissions-header-active .lgu-adm-page main>*:nth-child(2),
body.lgu-custom-admissions-header-active .lgu-adm-page .uops-apply-shell>*:nth-child(2) {
    animation-delay: 45ms;
}

body.lgu-custom-admissions-header-active .lgu-adm-page main>*:nth-child(3),
body.lgu-custom-admissions-header-active .lgu-adm-page .uops-apply-shell>*:nth-child(3) {
    animation-delay: 80ms;
}

body.lgu-custom-admissions-header-active .lgu-adm-page main>*:nth-child(4),
body.lgu-custom-admissions-header-active .lgu-adm-page .uops-apply-shell>*:nth-child(4) {
    animation-delay: 110ms;
}

@keyframes lguApplicantContentIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand-copy,
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy small,
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__role {
        display: none;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
        max-width: 164px;
        height: 39px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__identity {
        max-width: 140px;
    }
}

@media (max-width: 700px) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__inner {
        width: min(100% - 24px, 1180px);
        min-height: 68px;
        gap: 12px;
        padding: 8px 0;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
        max-width: 142px;
        height: 35px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__nav {
        gap: 9px !important;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
        min-height: 40px;
        padding: 6px 9px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-icon {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__identity {
        display: none;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__account {
        gap: 7px;
        padding-left: 9px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__avatar {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 520px) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
        max-width: 118px;
        height: 31px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy strong {
        font-size: 0;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy strong::after {
        content: "Status";
        font-size: 9px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
        width: 34px;
        padding: 0;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout span {
        display: none;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__notification-badge {
        top: -6px;
        right: -6px;
        width: 18px;
        height: 18px;
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lgu-adm-page .lgu-topbar.lgu-topbar--portal,
    .lgu-adm-page .lgu-topbar.lgu-topbar--portal.is-ready,
    body.lgu-custom-admissions-header-active .lgu-adm-page main>*,
    body.lgu-custom-admissions-header-active .lgu-adm-page .uops-apply-shell>* {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition-duration: 0.01ms !important;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link.has-correction-notification::after {
        animation: none !important;
    }
}

/* =========================================================================
   APPLICANT PORTAL NAVBAR - VISUAL POLISH V2
   Kept as a final override layer so the shared admissions header stays stable.
   ========================================================================= */

body.lgu-custom-admissions-header-active {
    --lgu-header-green: #08745B;
    --lgu-header-green-dark: #064E3B;
    --lgu-header-lime: #A8C943;
    --lgu-header-ink: #15211D;
    --lgu-header-muted: #6B7772;
    --lgu-header-line: #DDE8E3;
    --lgu-header-paper: #F7F9F7;
}

body.lgu-custom-admissions-header-active .web-page-content,
body.lgu-custom-admissions-header-active .page_content,
body.lgu-custom-admissions-header-active main {
    scroll-margin-top: 96px;
}

.lgu-adm-page .lgu-topbar.lgu-topbar--portal {
    isolation: isolate;
    border-top-width: 4px;
    background:
        radial-gradient(circle at 86% -90%, rgba(168, 201, 67, 0.13), transparent 34%),
        linear-gradient(110deg, rgba(255, 255, 255, 0.985), rgba(251, 254, 252, 0.96));
    box-shadow:
        0 10px 32px rgba(21, 33, 29, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.lgu-adm-page .lgu-topbar.lgu-topbar--portal::before {
    content: "";
    position: absolute;
    top: -4px;
    right: 0;
    left: 0;
    z-index: -1;
    height: 4px;
    background: linear-gradient(90deg,
            #075B47 0%,
            #08745B 40%,
            #79A934 76%,
            #B7D34B 100%);
}

.lgu-adm-page .lgu-topbar.lgu-topbar--portal::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(8, 116, 91, 0.16) 18%,
            rgba(8, 116, 91, 0.16) 82%,
            transparent);
    pointer-events: none;
}

.lgu-adm-page .lgu-topbar.lgu-topbar--portal.is-scrolled {
    background: rgba(255, 255, 255, 0.975);
    box-shadow:
        0 16px 38px rgba(21, 33, 29, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.92) inset;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__inner {
    min-height: 82px;
    padding: 11px 0;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand {
    gap: 16px;
    border-radius: 12px;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand:focus-visible {
    outline: 3px solid rgba(8, 116, 91, 0.18);
    outline-offset: 6px;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
    max-width: 190px;
    height: 46px;
    transition: transform 180ms ease, filter 180ms ease;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand:hover .lgu-topbar__logo {
    filter: saturate(1.08);
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand-copy {
    position: relative;
    gap: 1px;
    padding-left: 17px;
    border-left: 0;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand-copy::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--lgu-header-green), var(--lgu-header-lime));
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand-copy .lgu-topbar__eyebrow {
    color: var(--lgu-header-green);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand-copy strong {
    font-size: 13px;
    font-weight: 760;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand-copy .lgu-topbar__tagline {
    color: var(--lgu-header-muted);
    font-size: 9px;
    font-weight: 540;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__nav {
    gap: 14px !important;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
    gap: 10px;
    min-height: 50px;
    padding: 7px 12px 7px 8px;
    border-color: #CFE1D9;
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 249, 246, 0.96));
    box-shadow:
        0 7px 18px rgba(24, 66, 52, 0.07),
        0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link:hover,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link:focus-visible,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link.is-active {
    border-color: rgba(8, 116, 91, 0.42);
    background: linear-gradient(135deg, #FFFFFF, #EAF6F1);
    box-shadow:
        0 11px 24px rgba(24, 66, 52, 0.11),
        0 0 0 3px rgba(8, 116, 91, 0.06);
    transform: translateY(-2px);
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(8, 116, 91, 0.07);
    border-radius: 10px;
    background: linear-gradient(145deg, #EAF7F2, #DDF1E9);
    box-shadow: 0 4px 10px rgba(8, 116, 91, 0.07);
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link:hover .lgu-topbar__status-icon {
    background: linear-gradient(145deg, #DFF3EB, #CFEADF);
    transform: rotate(-2deg) scale(1.04);
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-icon svg {
    width: 17px;
    height: 17px;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy {
    gap: 2px;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy strong {
    font-size: 11px;
    font-weight: 760;
    letter-spacing: -0.005em;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy small {
    font-size: 8.5px;
    font-weight: 520;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-arrow {
    width: 13px;
    height: 13px;
    color: #7B8D86;
    transition: color 170ms ease, transform 170ms ease;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link:hover .lgu-topbar__status-arrow {
    color: var(--lgu-header-green);
    transform: translateX(2px);
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__notification-badge {
    width: 21px;
    height: 21px;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link.has-correction-notification {
    background: linear-gradient(135deg, #FFFFFF, #FFF5F3);
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__account {
    gap: 10px;
    padding: 6px 7px 6px 14px;
    border: 1px solid rgba(21, 33, 29, 0.08);
    border-radius: 14px;
    background: rgba(246, 249, 247, 0.82);
    box-shadow:
        0 5px 16px rgba(21, 33, 29, 0.045),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__identity {
    max-width: 165px;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__name {
    color: #2E413A;
    font-size: 11px;
    font-weight: 720;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__role {
    color: #7D8B85;
    font-size: 8.5px;
    font-weight: 540;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__avatar {
    position: relative;
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-color: #BFDCCE;
    background: linear-gradient(145deg, #E9F7F1, #D7EDE3);
    box-shadow:
        0 6px 15px rgba(8, 116, 91, 0.1),
        0 0 0 3px rgba(255, 255, 255, 0.9);
    font-weight: 800;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__avatar::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: 1px;
    width: 9px;
    height: 9px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #32A071;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__account:hover .lgu-topbar__avatar {
    box-shadow:
        0 9px 18px rgba(8, 116, 91, 0.15),
        0 0 0 3px rgba(255, 255, 255, 0.95);
}

.lgu-adm-page .lgu-topbar--portal .lgu-portal-logout-form {
    margin-left: 2px !important;
    padding-left: 7px !important;
    border-left: 1px solid #DDE5E1;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
    gap: 6px;
    min-height: 36px;
    padding: 0 9px;
    border-radius: 9px;
    color: #65736D;
    font-size: 9px;
    font-weight: 680;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout:hover,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout:focus-visible {
    border-color: #E8D7D2;
    background: #FFF5F2;
    transform: translateY(-1px);
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout:focus-visible {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.09);
}

@media (max-width: 980px) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand-copy,
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy small,
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__role {
        display: none;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
        max-width: 172px;
        height: 42px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__identity {
        max-width: 125px;
    }
}

@media (max-width: 720px) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__inner {
        width: min(100% - 24px, 1180px);
        min-height: 72px;
        gap: 12px;
        padding: 9px 0;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
        max-width: 145px;
        height: 37px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__nav {
        gap: 8px !important;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
        min-height: 44px;
        gap: 7px;
        padding: 5px 8px 5px 6px;
        border-radius: 11px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-arrow,
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__identity {
        display: none;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__account {
        gap: 7px;
        padding: 4px 5px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__avatar {
        display: grid !important;
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-portal-logout-form {
        margin-left: 0 !important;
        padding-left: 5px !important;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
        width: 34px;
        padding: 0;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout span {
        display: none;
    }
}

@media (max-width: 540px) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__inner {
        width: calc(100% - 20px);
        gap: 8px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
        max-width: 122px !important;
        height: 33px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy strong {
        font-size: 0;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy strong::after {
        content: "Status";
        font-size: 9.5px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__account {
        gap: 5px !important;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__notification-badge {
        top: -6px;
        right: -6px;
        width: 18px;
        height: 18px;
        font-size: 8px;
    }
}

@media (max-width: 400px) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__inner {
        width: calc(100% - 16px);
        gap: 6px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
        max-width: 108px !important;
        height: 31px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__nav {
        gap: 5px !important;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
        width: 38px;
        min-height: 38px;
        justify-content: center;
        padding: 3px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-copy {
        display: none;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__avatar {
        display: grid !important;
        flex-basis: 33px;
        width: 33px;
        height: 33px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
        width: 32px;
        min-height: 32px;
    }
}

/* =========================================================================
   APPLICANT PORTAL NAVBAR - SIMPLE REFERENCE-ALIGNED V3
   ========================================================================= */

body.lgu-custom-admissions-header-active .web-page-content,
body.lgu-custom-admissions-header-active .page_content,
body.lgu-custom-admissions-header-active main {
    scroll-margin-top: 80px;
}

.lgu-adm-page .lgu-topbar.lgu-topbar--portal {
    border-top: 3px solid #07845F;
    border-bottom: 1px solid #E5EAE7;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 7px 22px rgba(28, 47, 39, 0.055);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.lgu-adm-page .lgu-topbar.lgu-topbar--portal::before,
.lgu-adm-page .lgu-topbar.lgu-topbar--portal::after {
    display: none;
}

.lgu-adm-page .lgu-topbar.lgu-topbar--portal.is-scrolled {
    border-bottom-color: #DCE4E0;
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 10px 26px rgba(28, 47, 39, 0.08);
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__inner {
    width: min(1180px, calc(100% - 40px));
    min-height: 70px;
    padding: 9px 0;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 0;
    min-width: 0;
    border-radius: 0;
    cursor: pointer;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand:focus-visible {
    outline: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
    width: auto;
    max-width: 168px;
    height: 40px;
    cursor: pointer;
    filter: none;
    transform: none;
    transition: opacity 150ms ease;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand:hover .lgu-topbar__logo {
    filter: none;
    opacity: 0.86;
    transform: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__brand-copy,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-icon,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-arrow,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__role {
    display: none !important;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__nav {
    gap: 18px !important;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #BCD7CD;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: none;
    color: #21483C;
    transform: none;
    transition:
        border-color 150ms ease,
        background-color 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link:hover,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link:focus-visible,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link.is-active {
    border-color: #79B7A2;
    background: #F3FAF7;
    box-shadow: 0 0 0 3px rgba(7, 132, 95, 0.07);
    color: #075B45;
    outline: none;
    transform: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-text {
    font-size: 10px;
    font-weight: 720;
    letter-spacing: 0.005em;
    line-height: 1;
    white-space: nowrap;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link.has-correction-notification {
    border-color: #E0A29B;
    background: #FFF8F7;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link.has-correction-notification::after {
    display: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__notification-badge {
    top: -7px;
    right: -7px;
    width: 19px;
    height: 19px;
    font-size: 8px;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__account {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__identity {
    display: block;
    max-width: 180px;
    text-align: right;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__name {
    color: #41544D;
    font-size: 10px;
    font-weight: 680;
    line-height: 1.2;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__avatar {
    position: static;
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #C6E0D6;
    border-radius: 50%;
    background: #EAF6F2;
    box-shadow: none;
    color: #0B6B52;
    font-size: 9px;
    font-weight: 760;
    transform: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__avatar::after {
    display: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__account:hover .lgu-topbar__avatar {
    border-color: #A9D1C2;
    box-shadow: none;
    transform: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-portal-logout-form {
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
    width: auto;
    min-height: 34px;
    padding: 0 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #52655E;
    font-size: 9px;
    font-weight: 650;
    transform: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout:hover,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout:focus-visible {
    border: 0;
    background: #F2F7F5;
    box-shadow: none;
    color: #075B45;
    outline: none;
    transform: none;
}

@media (max-width: 760px) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__inner {
        width: calc(100% - 24px);
        min-height: 64px;
        gap: 12px;
        padding: 8px 0;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
        max-width: 138px !important;
        height: 34px !important;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__nav {
        gap: 10px !important;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
        min-height: 36px;
        padding: 0 12px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__identity {
        display: none !important;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__account {
        gap: 8px !important;
        padding: 0;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__avatar {
        display: grid !important;
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
        width: auto;
        min-height: 32px;
        padding: 0 4px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout span {
        display: inline !important;
    }
}

@media (max-width: 520px) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__inner {
        width: calc(100% - 16px);
        gap: 8px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
        max-width: 112px !important;
        height: 31px !important;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__nav {
        gap: 7px !important;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
        padding: 0 10px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-text {
        font-size: 0;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-text::after {
        content: "Status";
        font-size: 9px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__account {
        gap: 5px !important;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
        font-size: 8.5px;
    }
}

@media (max-width: 360px) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logo {
        max-width: 98px !important;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
        min-height: 34px;
        padding: 0 8px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__avatar {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
        padding: 0 2px;
    }
}

/* Applicant Portal header actions: stable, rectangular, and touch-friendly. */
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 40px;
    min-height: 40px;
    border: 1px solid #A9CEC0;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: none;
    color: #005D47;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transform: none;
    animation: none;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
    min-width: 132px;
    padding: 0 16px;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
    min-width: 76px;
    padding: 0 14px;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link.is-active {
    border-color: #A9CEC0;
    background: #FFFFFF;
    color: #005D47;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link:hover,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link:focus-visible,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout:hover,
.lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout:focus-visible {
    border-color: #00785B;
    background: #00785B;
    box-shadow: none;
    color: #FFFFFF;
    outline: 2px solid rgba(0, 120, 91, 0.18);
    outline-offset: 2px;
    transform: none;
}

.lgu-adm-page .lgu-topbar--portal .lgu-topbar__account {
    align-items: center;
}

@media (max-width: 760px) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link,
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
        height: 38px;
        min-height: 38px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
        min-width: 112px;
        padding-inline: 12px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
        min-width: 70px;
        padding-inline: 11px;
    }
}

@media (max-width: 520px) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
        min-width: 76px;
        padding-inline: 10px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
        min-width: 62px;
        padding-inline: 9px;
    }
}

@media (max-width: 360px) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link,
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
        height: 36px;
        min-height: 36px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link {
        min-width: 68px;
        padding-inline: 8px;
    }

    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
        min-width: 58px;
        padding-inline: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__status-link,
    .lgu-adm-page .lgu-topbar--portal .lgu-topbar__logout {
        transition: none;
    }
    }
}
/* Payment plan picker (offer draft) */
.lgu-adm-page .lgu-payment-plan__label {
    display: block;
    font-weight: 600;
    margin: 16px 0 6px;
}

.lgu-adm-page .lgu-payment-plan__select {
    width: 100%;
    max-width: 340px;
    padding: 10px 12px;
    border: 1px solid #C8CCD4;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
}

.lgu-adm-page .lgu-payment-plan__breakdown {
    margin-top: 16px;
}

.lgu-adm-page .lgu-payment-plan__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.lgu-adm-page .lgu-payment-plan__table th {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 2px solid #E2E4EA;
    color: #4A4F5C;
    font-weight: 600;
}

.lgu-adm-page .lgu-payment-plan__table td {
    padding: 8px 6px;
    border-bottom: 1px solid #EEF0F4;
}

.lgu-adm-page .lgu-payment-plan__total {
    margin-top: 10px;
    font-weight: 700;
}

.lgu-adm-page .lgu-payment-plan__problem {
    color: #B3261E;
    margin-top: 10px;
}

.lgu-adm-page .lgu-payment-plan__hint {
    color: #5A6072;
    margin-top: 10px;
}