:root {
    --login-primary: #0c4a98;
    --login-primary-dark: #073879;
    --login-primary-light: #5b9bda;
    --brand-navy: #ffffff;
    --brand-blue: #0c4a98;
    --brand-muted: #d9e8ff;
    --brand-gold: #f0c444;
    --brand-gold-dark: #c99922;
    --login-ink: #1e293b;
    --login-muted: #5f6f84;
    --login-line: #2f73c9;
    --login-line-strong: #b8c9db;
    --login-surface: #ffffff;
    --login-error-bg: #fff3f2;
    --login-error-border: #efb5b0;
    --login-error-text: #b42318;
    --login-radius: 22px;
    --login-shadow: 0 28px 70px rgba(0, 34, 76, 0.22);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    color: var(--login-ink);
    font-family: "Poppins", Arial, sans-serif;

    background:
        radial-gradient(ellipse at 8% 8%, rgba(36, 116, 194, .24) 0%, rgba(36, 116, 194, 0) 34%),
        radial-gradient(ellipse at 94% 90%, rgba(25, 98, 179, .22) 0%, rgba(25, 98, 179, 0) 36%),
        linear-gradient(135deg, rgba(255,255,255,.035) 0%, transparent 34%, rgba(255,255,255,.02) 58%, transparent 82%),
        linear-gradient(90deg, #031c49 0%, #052d66 9%, #08478e 24%, #1066b4 44%, #1371bf 50%, #1066b4 56%, #08478e 76%, #052d66 91%, #031c49 100%);
    background-attachment: fixed;

    text-rendering: optimizeLegibility;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    z-index: 0;
    opacity: .22;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%2379c8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.55'%3E%3Cpath d='M31 46h34c10 0 18 8 18 18v42c0-10-8-18-18-18H31z'/%3E%3Cpath d='M83 64c0-10 8-18 18-18h34v42h-34c-10 0-18 8-18 18z'/%3E%3Cpath d='M169 52l42 16-42 16-42-16z'/%3E%3Cpath d='M145 77v19c16 10 33 10 49 0V77'/%3E%3Cpath d='M46 168h45l13 13v49H46z'/%3E%3Cpath d='M59 194h32M59 210h26'/%3E%3Cpath d='M144 169l51-51 19 19-51 51-27 8z'/%3E%3Ccircle cx='196' cy='205' r='22'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' opacity='.42'%3E%3Cpath d='M169 52l42 16-42 16-42-16z'/%3E%3Cpath d='M145 77v19c16 10 33 10 49 0V77'/%3E%3Cpath d='M46 168h45l13 13v49H46z'/%3E%3Cpath d='M91 168v13h13'/%3E%3Cpath d='M144 169l51-51 19 19-51 51-27 8z'/%3E%3Cpath d='M150 204h61M162 216h37'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 300px 300px, 230px 230px;
    background-position: calc(100% + 72px) 36px, calc(100% + 38px) calc(100% + 34px);
}

body::after {
    z-index: 0;
    opacity: .18;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%2379c8ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='.6'%3E%3Cpath d='M24 76c50-34 96-34 146 0s96 34 146 0'/%3E%3Cpath d='M24 88c50-34 96-34 146 0s96 34 146 0' opacity='.55'/%3E%3Cpath d='M24 100c50-34 96-34 146 0s96 34 146 0' opacity='.36'/%3E%3Cpath d='M223 222h45v58h-45zM236 235h19M236 249h19M236 263h19'/%3E%3Ccircle cx='277' cy='234' r='2.5'/%3E%3Ccircle cx='277' cy='249' r='2.5'/%3E%3Ccircle cx='277' cy='264' r='2.5'/%3E%3Cpath d='M139 223l31 12-31 12-31-12zM121 246v12c12 8 24 8 36 0v-12'/%3E%3C/g%3E%3Cg fill='%2379c8ff' opacity='.48'%3E%3Ccircle cx='38' cy='36' r='3'/%3E%3Ccircle cx='62' cy='36' r='3'/%3E%3Ccircle cx='86' cy='36' r='3'/%3E%3Ccircle cx='38' cy='60' r='3'/%3E%3Ccircle cx='62' cy='60' r='3'/%3E%3Ccircle cx='86' cy='60' r='3'/%3E%3Ccircle cx='234' cy='72' r='3'/%3E%3Ccircle cx='258' cy='72' r='3'/%3E%3Ccircle cx='282' cy='72' r='3'/%3E%3Ccircle cx='234' cy='96' r='3'/%3E%3Ccircle cx='258' cy='96' r='3'/%3E%3Ccircle cx='282' cy='96' r='3'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='190' viewBox='0 0 760 190'%3E%3Cg fill='none' stroke='%237fd0ff' stroke-width='2' stroke-linecap='round' opacity='.5'%3E%3Cpath d='M0 86C86 22 150 22 236 86s150 64 236 0 150-64 236 0'/%3E%3Cpath d='M0 104C86 40 150 40 236 104s150 64 236 0 150-64 236 0' opacity='.68'/%3E%3Cpath d='M0 122C86 58 150 58 236 122s150 64 236 0 150-64 236 0' opacity='.42'/%3E%3Cpath d='M0 140C86 76 150 76 236 140s150 64 236 0 150-64 236 0' opacity='.25'/%3E%3C/g%3E%3Cg fill='%237fd0ff' opacity='.36'%3E%3Ccircle cx='36' cy='52' r='3'/%3E%3Ccircle cx='70' cy='52' r='3'/%3E%3Ccircle cx='104' cy='52' r='3'/%3E%3Ccircle cx='36' cy='86' r='3'/%3E%3Ccircle cx='70' cy='86' r='3'/%3E%3Ccircle cx='104' cy='86' r='3'/%3E%3Ccircle cx='612' cy='126' r='3'/%3E%3Ccircle cx='646' cy='126' r='3'/%3E%3Ccircle cx='680' cy='126' r='3'/%3E%3Ccircle cx='612' cy='160' r='3'/%3E%3Ccircle cx='646' cy='160' r='3'/%3E%3Ccircle cx='680' cy='160' r='3'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='620' viewBox='0 0 520 620'%3E%3Cg fill='none' stroke='%23c7e7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='M102 92h55c18 0 32 14 32 32v70c0-18-14-32-32-32h-55z'/%3E%3Cpath d='M189 124c0-18 14-32 32-32h55v70h-55c-18 0-32 14-32 32z'/%3E%3Cpath d='M327 103l70 27-70 27-70-27z'/%3E%3Cpath d='M286 151v31c26 17 55 17 82 0v-31'/%3E%3Cpath d='M397 130v52'/%3E%3Cpath d='M390 185h14l-7 13z'/%3E%3Cpath d='M118 312h74l22 22v80h-96z'/%3E%3Cpath d='M192 312v22h22'/%3E%3Cpath d='M140 354h52M140 381h41'/%3E%3Cpath d='M278 315l83-83 31 31-83 83-45 13z'/%3E%3Cpath d='M361 232l31 31'/%3E%3Ccircle cx='342' cy='442' r='39'/%3E%3Cpath d='M303 442h78M342 403c14 18 14 60 0 78M342 403c-14 18-14 60 0 78'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220' viewBox='0 0 320 220'%3E%3Cg fill='none' stroke='%23d7eeff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='M10 42C54 14 94 14 138 42s84 28 128 0'/%3E%3Cpath d='M10 58C54 30 94 30 138 58s84 28 128 0' opacity='.62'/%3E%3Cpath d='M10 74C54 46 94 46 138 74s84 28 128 0' opacity='.36'/%3E%3Crect x='54' y='98' width='76' height='82' rx='10'/%3E%3Cpath d='M72 121h40M72 143h14M96 143h16M72 164h14M96 164h16'/%3E%3Ccircle cx='92' cy='78' r='21'/%3E%3Cpath d='M71 78h42M92 57c8 10 8 32 0 42M92 57c-8 10-8 32 0 42'/%3E%3Cpath d='M190 112l58 22-58 22-58-22z'/%3E%3Cpath d='M156 156v18c22 14 46 14 68 0v-18'/%3E%3Cpath d='M248 134v42'/%3E%3Cpath d='M242 178h12l-6 11z'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='310' height='220' viewBox='0 0 310 220'%3E%3Cg fill='none' stroke='%23d7eeff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.45'%3E%3Cpath d='M42 38h78l24 24v102H42z'/%3E%3Cpath d='M120 38v24h24'/%3E%3Cpath d='M187 54l76 76-23 23-76-76z'/%3E%3Cpath d='M164 77l-13 36 36-13'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(90deg, rgba(2,20,62,.28), transparent 14%, transparent 86%, rgba(2,20,62,.3));
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 340px 340px, min(58vw, 760px) auto, min(24vw, 310px) auto, min(19vw, 250px) auto, min(20vw, 270px) auto, 100% 100%;
    background-position: left calc(100% + 68px), 6% 72%, 48% 15%, 40% 30%, 48% 91%, center center;
}

a {
    color: inherit;
}


.login-page {
    display: grid;
    align-items: center;
    width: min(1360px, calc(100vw - 64px));
	grid-template-columns: 50% 50%;
	gap: 20px;
    height: min(760px, calc(100vh - 64px));
    min-height: 640px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    position: relative;
    z-index: 1;
    animation: pageFade 520ms ease-out both;
}

/* Left column: college identity and portal context. */
.login-brand-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    height: 100%;
    position: relative;
    z-index: 0;
    text-align: left;
    color: #ffffff;
    padding: 26px 16px 26px 0;
}

.login-banner-divider{
    position:relative;
    width:100%;
    height:2px;
    margin:18px 0 22px;
    border-radius:999px;

    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(240,196,68,.18) 8%,
        var(--brand-gold) 50%,
        rgba(240,196,68,.18) 92%,
        transparent 100%
    );

}

.login-banner-divider::after{
    content:"\2605";
    position:absolute;
    left:50%;
    top:50%;
    color:var(--brand-gold);
    font-size:18px;
    line-height:1;
    text-shadow:0 1px 0 rgba(184,132,24,.55);
    transform:translate(-50%,-50%);
}

.brand-content {
    display: grid;
    justify-items: start;
    width: min(100%, 620px);
    text-align: left;
    gap: 6px;
}


.college-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 0 4px;
    padding:6px 14px;
    border:1px solid rgba(240,196,68,.38);
    border-radius:999px;
    color:#062a56;
    font-size:12px;
    font-weight:700;
    letter-spacing:.7px;
    text-transform:uppercase;
    background:linear-gradient(180deg, #ffe176, #dba329);
    box-shadow:0 8px 18px rgba(0, 28, 75, .16);
}

.college-name {
    max-width:620px;
    margin:2px 0 6px;
    color:#ffffff;
    font-size:37px;
    font-weight:800;
    line-height:1.12;
    letter-spacing:0;
    text-transform:none;
    text-shadow:
        1px 0 rgba(0,45,95,.78),
       -1px 0 rgba(0,45,95,.78),
        0 1px rgba(0,45,95,.78),
        0 -1px rgba(0,45,95,.78);
}

.college-meta {
    margin:0;
    color:#e7f2ff;
    font-size:15px;
    font-weight:600;
    line-height:1.4;
}

.college-accreditation {
    max-width:540px;
    margin:0 0 8px;
    color:#f2f7ff;
    font-size:16px;
    font-weight:600;
    line-height:1.45;
}

.iboss-identity {
    display:flex;
    align-items:center;
    gap:14px;
    margin:8px 0 10px;
}

.brand-logo{
    width:76px;
    height:auto;
    display:block;
    flex:0 0 auto;
    transition:transform .3s ease;
}

.brand-logo:hover{
    transform:scale(1.03);
}

.iboss-identity h2 {
    margin:0 0 2px;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:42px;
    font-weight:800;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
    text-shadow:
        1px 0 rgba(0,45,95,.75),
       -1px 0 rgba(0,45,95,.75),
        0 1px rgba(0,45,95,.75),
        0 -1px rgba(0,45,95,.75);
}

.brand-kicker,
.login-kicker{
    margin:0;
    font-size:15px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color: #ffffff;

    text-shadow:
        1px 0 rgba(0,45,95,.85),
       -1px 0 rgba(0,45,95,.85),
        0 1px rgba(0,45,95,.85),
        0 -1px rgba(0,45,95,.85);
}

.brand-content h1:not(.college-name){
    margin:4px 0 6px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:54px;
    font-weight:800;
    line-height:1.05;
    letter-spacing:0;
    word-spacing:0;
    white-space:nowrap;

    color: #ffffff;

    text-shadow:
        1px 0 rgba(0,45,95,.75),
       -1px 0 rgba(0,45,95,.75),
        0 1px rgba(0,45,95,.75),
        0 -1px rgba(0,45,95,.75);
}

.brand-initial {
    position:relative;
    display:inline-block;
    color:var(--brand-gold);
    font-family:Georgia, "Times New Roman", serif;
    font-style:italic;
    font-weight:400;
    font-size:1.12em;
    margin-right:6px;
    transform:translateY(1px) skewX(-6deg);
}

.brand-initial::before {
    content:"\1F393";
    position:absolute;
    left:74%;
    top:-4px;
    font-size:19px;
    line-height:1;
    font-style:normal;
    transform:translateX(-50%) rotate(-6deg);
}

.brand-title{
    position:relative;
    display:block;
    width:100%;
    transform:none;
}

.brand-divider{
    position:relative;
    width:min(500px, 92%);
    height:2px;
    margin:12px 0 14px;
    background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.08));
    border-radius:999px;
}

.brand-divider::after{
    content:"\2605";
    position:absolute;
    left:50%;
    top:50%;
    color:var(--brand-gold);
    font-size:18px;
    line-height:1;
    text-shadow:0 1px 0 rgba(184,132,24,.55);
    transform:translate(-50%,-50%);
}

.brand-copy{
    max-width:560px;
    margin:0 0 8px;
    color: #ffffff;
    font-size:22px;
    font-weight:800;
    line-height:1.12;
	letter-spacing:0;
    text-align:left;
	text-transform:uppercase;

    text-shadow:
        1px 0 rgba(0,45,95,.85),
       -1px 0 rgba(0,45,95,.85),
        0 1px rgba(0,45,95,.85),
        0 -1px rgba(0,45,95,.85);
}

.brand-copy span {
    display:block;
    color:var(--brand-gold);
}

.brand-copy strong {
    color:#ffffff;
    font-weight:800;
}

.brand-support,
.brand-subcopy {
    margin:0;
    color:#ffffff;
    font-size:13px;
    line-height:1.35;
}

.brand-support {
    margin-top:6px;
}

.brand-support strong {
    color:var(--brand-gold);
}

.brand-subcopy {
    max-width:560px;
    margin-top:4px;
    color:#dcecff;
}

.brand-ribbon {
    width:min(500px, 100%);
    margin:10px 0 8px;
    padding:7px 22px 7px 12px;
    color:#062a56;
    background:linear-gradient(135deg, #ffd95d, #dba329);
    clip-path:polygon(0 0, 94% 0, 100% 100%, 0 100%);
    box-shadow:0 10px 22px rgba(0,0,0,.16);
}

.brand-ribbon strong,
.brand-ribbon span {
    display:block;
}

.brand-ribbon strong {
    font-size:13px;
    font-weight:600;
}

.brand-ribbon span {
    margin-top:2px;
    font-size:12px;
    font-weight:400;
}

.brand-features {
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width:min(620px, 100%);
    gap:0;
    margin:0 0 10px;
}

.brand-feature {
    display:flex;
    align-items:center;
    gap:9px;
    min-height:46px;
    padding:0 14px;
    color:#ffffff;
    font-size:12px;
    line-height:1.35;
    border-right:1px solid rgba(255,255,255,.45);
}

.brand-feature:first-child {
    padding-left:0;
}

.brand-feature:last-child {
    border-right:0;
}

.feature-icon {
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    flex:0 0 auto;
    border-radius:50%;
    color:#063569;
    background:linear-gradient(135deg, #ffe176, #d29b24);
    clip-path:polygon(50% 0%, 56% 8%, 65% 3%, 70% 12%, 80% 11%, 83% 21%, 92% 25%, 89% 35%, 97% 44%, 90% 50%, 97% 56%, 89% 65%, 92% 75%, 83% 79%, 80% 89%, 70% 88%, 65% 97%, 56% 92%, 50% 100%, 44% 92%, 35% 97%, 30% 88%, 20% 89%, 17% 79%, 8% 75%, 11% 65%, 3% 56%, 10% 50%, 3% 44%, 11% 35%, 8% 25%, 17% 21%, 20% 11%, 30% 12%, 35% 3%, 44% 8%);
    font-size:19px;
    font-weight:800;
}

.feature-icon::before {
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgba(255,255,255,.34);
}

.feature-erp::before {
    content:"\1F393";
    font-size:16px;
}

.feature-exam::before {
    content:"\2699";
    font-size:19px;
}

.feature-quality::before {
    content:"";
    width:13px;
    height:16px;
    border:2px solid #063569;
    border-left-width:4px;
    border-radius:3px 6px 6px 3px;
    background:
        linear-gradient(#063569, #063569) 8px 6px / 7px 2px no-repeat,
        linear-gradient(#063569, #063569) 8px 12px / 6px 2px no-repeat,
        rgba(255,255,255,.18);
}

.brand-footer {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    width:min(620px, 100%);
    margin:4px 0 0;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.16);
}

.brand-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.brand-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 130px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(201, 153, 34, 0.45);
    border-radius: 999px;
    color: #062a56;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .2px;
    background: linear-gradient(180deg, #ffe176, #dba329);
    box-shadow:
        0 8px 18px rgba(95,62,0,.16),
        inset 0 1px 0 rgba(255,255,255,.45);
    transition: all .3s ease;
}

.brand-links img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    flex: 0 0 auto;
}

.brand-links a:hover,
.brand-links a:focus {
    color: #ffffff;
    border-color: #b88418;
    background: linear-gradient(135deg, #e7b739, #b88418);
    box-shadow: 0 10px 24px rgba(95,62,0,.24);
    transform: translateY(-3px) scale(1.03);
}

.brand-links a:active {
    transform: translateY(0) scale(.98);
    box-shadow: 0 4px 12px rgba(95,62,0,.18);
}


.brand-company {
	display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    margin:0;
    padding:0;
    border:0;
    color: #cfe2fb;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
}

.brand-company strong {
    display: block;
    color: #ffffff;
    font-weight: 700;
	font-size: 13px;

    text-shadow:
        1px 0 rgba(0,45,95,.85),
       -1px 0 rgba(0,45,95,.85),
        0 1px rgba(0,45,95,.85),
        0 -1px rgba(0,45,95,.85);
}

.brand-company-icon{
    width:30px;
    height:30px;
    object-fit:contain;
    flex-shrink:0;
}

/* Right column: vertically centered modern login card. */
.login-form-panel {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    transform: none;
}

.login-card {
    position:relative;
    overflow:hidden;
    width: min(100%, 540px);
    min-height: 0;
    padding: 40px 44px 44px;
    border: 1px solid var(--brand-gold);
    border-radius: 22px;
    background:
        linear-gradient(315deg, rgba(240,196,68,.12) 0 12%, transparent 12% 100%),
        repeating-linear-gradient(135deg, rgba(12,74,152,.035) 0 1px, transparent 1px 18px),
        var(--login-surface);
    box-shadow:
        0 0 0 1px rgba(240,196,68,.95),
        var(--login-shadow);
    animation: cardEnter 560ms ease-out 80ms both;
}

.login-card::before,
.login-card::after {
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;
}

.login-card > * {
    position:relative;
    z-index:1;
}

.login-card::before {
    left:-150px;
    top:-182px;
    width:260px;
    height:205px;
    border:18px solid var(--brand-gold);
    border-right:0;
    border-bottom:0;
    border-radius:0 0 190px 0;
}

.login-card::after {
    right:-98px;
    bottom:-132px;
    width:260px;
    height:205px;
    border:22px solid var(--brand-gold);
    border-left:0;
    border-top:0;
    border-radius:190px 0 0 0;
}

.login-banner {
    display: block;
    width: 100%;
    height: 72px;
    max-width:100%;
    object-fit:contain;
    object-position:center;
    margin: 0 auto 24px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.login-header {
    position:relative;
    margin-bottom: 24px;
    padding-left:16px;
    border-left:5px solid var(--brand-gold);
}

.login-kicker{
    margin:0;
    font-size:15px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color: var(--login-ink);

    text-shadow:
        1px 0 #ffffff,
       -1px 0 #ffffff,
        0 1px #ffffff,
        0 -1px #ffffff;
}

.login-header h2 {
    margin: 0;
    
    color: var(--login-ink);
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
}

.login-header h2 span {
    color:var(--login-primary);
}

.login-form {
    display: grid;
    gap: 16px;
}

.form-field {
    display: grid;
    gap: 8px;
}

.form-field span {
    color: var(--login-muted);
    font-size: 14px;
    font-weight: 600;
}

.form-field input {
    width: 100%;
    min-height: 52px;
    padding: 12px 15px;
    border: 1px solid #8ab5ed;
    border-radius: 18px;
    color: var(--login-ink);
    font: inherit;
    font-size: 15px;
    background: #ffffff;
    outline: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.form-field input::placeholder {
    color: #95a3b5;
}

.form-field input:hover {
    border-color: var(--login-line-strong);
}

.form-field input:focus {
    border-color: var(--login-primary);
    box-shadow: 0 0 0 4px rgba(15, 95, 173, 0.12);
}

.password-input-wrap {
    position: relative;
    display: block;
}

.password-input-wrap input {
    padding-right: 148px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 126px;
    height: 28px;
    padding: 0;
    border: 0;
    color: #5e6f86;
    font: inherit;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    background: transparent;
    transform: translateY(-50%);
    transition: color 0.2s ease;
}

.password-toggle:hover,
.password-toggle:focus {
    color: var(--login-primary);
    outline: none;
}

.password-toggle:focus-visible {
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(47, 115, 201, 0.18);
}

.password-toggle-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
}

.password-toggle-text {
    white-space: nowrap;
}

.login-btn {
    min-height: 56px;
    margin-top: 6px;
    border: 0;
    border-radius: 14px;
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #0f55ad, #083f88);
    box-shadow: 0 14px 28px rgba(15, 95, 173, 0.24);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.login-options {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:16px;
    margin-top:-4px;
    color:#63748b;
    font-size:13px;
}

.login-options a {
    color:#0b55b5;
    font-weight:600;
    text-decoration:none;
}

.login-options a:hover,
.login-options a:focus {
    text-decoration:underline;
}

.login-btn:hover,
.login-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 95, 173, 0.3);
}

.login-btn:active {
    transform: translateY(0);
    box-shadow: 0 10px 22px rgba(15, 95, 173, 0.22);
}

.login-error {
    padding: 12px 14px;
    border: 1px solid var(--login-error-border);
    border-radius: var(--login-radius);
    color: var(--login-error-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    background: var(--login-error-bg);
}

.input-icon-wrap,
.password-input-wrap{
    position:relative;
    display:block;
}

.input-icon{
    position:absolute;
    left:15px;
    top:50%;
    width:18px;
    height:18px;
    object-fit:contain;
    transform:translateY(-50%);
    opacity:.75;
    pointer-events:none;
}

.input-icon-wrap input{
    padding-left:46px;
}

.password-input-wrap input{
    padding-left:46px;
    padding-right:148px;
}

.input-icon-wrap:focus-within .input-icon,
.password-input-wrap:focus-within .input-icon{
    opacity:1;
    transform:translateY(-50%) scale(1.05);
}

@keyframes pageFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@media (max-width: 1100px) {
    body {
        overflow: auto;
    }

    .login-page {
        grid-template-columns: 1fr;
        width: min(820px, calc(100vw - 40px));
        height: auto;
        min-height: 100vh;
        margin: 0 auto;
        padding: 30px 0;
        transform: none;
        gap: 24px;
    }

    .login-brand-panel,
    .login-form-panel {
        height: auto;
    }

    .login-form-panel {
        align-items: center;
        transform: none;
    }

    .login-brand-panel {
        padding: 0;
    }

    .brand-content {
        justify-items: center;
        text-align: center;
    }

    .brand-divider {
        margin-right:auto;
        margin-left:auto;
    }

    .brand-copy,
    .brand-support,
    .brand-subcopy {
        text-align:center;
    }

    .brand-footer,
    .brand-links,
    .brand-company {
        justify-content:center;
    }

    .brand-footer {
        flex-wrap:wrap;
    }

}

@media (max-width: 520px) {
    .login-page {
        width: min(100%, calc(100vw - 32px));
        padding: 24px 0;
        gap: 22px;
    }

    .brand-logo {
        width: 62px;
    }

    .college-name {
        font-size: 28px;
        line-height:1.16;
    }

    .college-meta,
    .college-accreditation {
        font-size:13px;
        text-align:center;
    }

    .iboss-identity {
        justify-content:center;
    }

    .iboss-identity h2 {
        font-size:32px;
    }

    .brand-copy {
        font-size: 20px;
    }

    .brand-kicker {
        font-size:14px;
    }

    .brand-support,
    .brand-subcopy {
        font-size:13px;
    }

    .brand-ribbon {
        padding:10px 14px;
        clip-path:none;
        border-radius:10px;
    }

    .brand-features {
        grid-template-columns:1fr;
        gap:12px;
    }

    .brand-feature {
        justify-content:center;
        min-height:0;
        padding:0;
        border-right:0;
    }

    .login-card {
        min-height:0;
        padding: 48px 22px;
        border-radius:22px;
    }

    .login-card::before,
    .login-card::after {
        width:220px;
        height:170px;
        border-width:18px;
    }

    .login-header h2 {
        font-size: 23px;
    }

    .brand-footer,
    .brand-links {
        width: 100%;
    }

    .brand-footer {
        flex-direction:column;
        gap:10px;
    }

    .brand-links a {
        justify-content: center;
        width: 100%;
    }

    .login-options {
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}