:root{--primary:#4f46e5;--primary-hover:#4338ca;--ui-border:#e2e8f0;--font-sans:'Inter',system-ui,sans-serif;--font-label:'Public Sans',system-ui,sans-serif;--transition-fast:.15s ease}
*,*:before,*:after{box-sizing:border-box}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;margin:0;padding:1rem;background:#f4f2ff;color:#1e293b;font-family:var(--font-sans);-webkit-font-smoothing:antialiased}.auth-shell{width:100%;display:grid;justify-items:center}.auth-card{width:min(100%,26.25rem);padding:2rem;border:0;border-radius:1rem;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.06)}.auth-heading{text-align:center;margin-bottom:1.5rem}.auth-brand-mark{display:grid;place-items:center;width:4rem;height:4rem;margin:0 auto .75rem;border-radius:1.5rem;background:#eef2ff;color:var(--primary);filter:drop-shadow(0 2px 4px rgba(79,70,229,.12))}.auth-brand-mark span{font-size:2rem}.auth-heading h1{margin:0;color:#1e293b;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}.auth-heading p{margin:.25rem 0 0;color:#64748b;font-family:var(--font-label);font-size:.75rem;font-weight:500}.auth-form{display:grid;gap:0}.auth-form>label{margin:0 0 .375rem;color:#475569;font-family:var(--font-label);font-size:.75rem;font-weight:500}.auth-input{position:relative;margin-bottom:1rem}.auth-input>span{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:1.1rem;pointer-events:none}.auth-input input{display:block;width:100%;height:2.5rem;padding:.5rem 2.4rem;border:1px solid var(--ui-border);border-radius:.55rem;background:#fff;color:#1e293b;font-size:.75rem;outline:0}.auth-input input:focus{border-color:#5842e3;box-shadow:0 0 0 2px rgba(88,66,227,.14)}.auth-input button{position:absolute;right:.2rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:2.25rem;height:2.25rem;border:0;background:transparent;color:#94a3b8;cursor:pointer}.auth-input button:hover{color:#5842e3}.auth-options{display:flex;align-items:center;justify-content:space-between;margin:.05rem 0 1rem;font-family:var(--font-label);font-size:.75rem}.remember{display:flex;align-items:center;gap:.5rem;color:#64748b}.remember input{width:1rem;height:1rem;accent-color:#5842e3}.auth-link{color:#5842e3;font-weight:500;text-decoration:none}.auth-link:hover{color:#4934cc;text-decoration:underline}.auth-submit{width:100%;height:2.5rem;padding:.5rem 1rem;border:1px solid transparent;border-radius:.55rem;background:#5842e3;color:#fff;font-size:.75rem;font-weight:600;box-shadow:0 2px 5px rgba(88,66,227,.18);cursor:pointer}.auth-submit:hover{background:#4934cc}.auth-submit:active{transform:scale(.98)}.auth-submit:disabled{opacity:.7;cursor:wait}.auth-footer{margin-top:1.5rem;padding-top:1rem;border-top:1px solid #f1f5f9;text-align:center}.auth-back-link{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;color:#64748b;font-size:.75rem;font-weight:500;text-decoration:none}.auth-back-link:hover{color:#1e293b}.auth-back-link span{font-size:.875rem}.auth-error{display:none;align-items:center;gap:.55rem;margin-bottom:1rem;padding:.75rem;border-radius:.55rem;background:#fef2f2;color:#b91c1c;font-size:.75rem}.auth-error span:first-child{font-size:1.1rem}.demo-access{margin-top:1rem;color:#64748b;font-size:.68rem}.demo-access summary{cursor:pointer}.demo-cards-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.65rem}.demo-card-item{display:grid;gap:.1rem;padding:.55rem;border:1px solid var(--ui-border);border-radius:.55rem;background:#f8fafc;color:#334155;cursor:pointer}.demo-card-item:hover{border-color:#c7d2fe;background:#eef2ff}.demo-role-name{font-size:.65rem;font-weight:700}.demo-user-val{color:#64748b;font-size:.6rem}.swal2-popup{border-radius:1rem!important;font-family:var(--font-sans)!important}
@media(max-width:640px){.auth-card{padding:1.5rem}.auth-options{align-items:flex-start;gap:.75rem}.demo-cards-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Exact ISMERS authentication-card logo treatment. */
.auth-brand-mark{display:flex;align-items:center;justify-content:center;width:auto;height:auto;border-radius:0;background:transparent}
.auth-brand-mark img{width:4rem;height:4rem;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(79,70,229,.12));transition:transform .18s ease}
.auth-brand-mark img:hover{transform:scale(1.05)}
.auth-input button .material-symbols-outlined{font-size:1.3rem}