:root{--brand-pink:#f51582;--brand-purple:#9b6dff;--brand-maroon:#330c26;--brand-dark:#0d0b1e;--card-bg:#fffffff5;--muted:#888;--text:#1a1a2e;--border:#e5e5e5;--input-bg:#f4f4f6;--input-border:#d8d8e0;--radius-card:1.75rem;--radius-input:.75rem;--radius-btn:.75rem}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--brand-maroon);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;font-family:DM Sans,sans-serif}.auth-shell{grid-template-rows:1fr;grid-template-columns:1fr 440px 1fr;min-height:100dvh;display:grid;position:relative;overflow:hidden}.auth-shell__bg{z-index:0;background-image:url(/images/auth_bg.png);background-position:50%;background-size:cover;position:fixed;inset:0}.auth-card{z-index:10;background:var(--card-bg);border-radius:var(--radius-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);flex-direction:column;grid-column:2;align-self:center;gap:0;margin:2rem 0;padding:2.75rem 2.5rem 2.5rem;display:flex;position:relative}.auth-logo{justify-content:center;align-items:center;margin-bottom:2rem;display:flex}.auth-logo img{object-fit:contain;width:auto;height:36px}.auth-heading{color:var(--text);letter-spacing:-.02em;margin-bottom:.375rem;font-size:1.75rem;font-weight:700;line-height:1.2}.auth-subheading{color:var(--muted);margin-bottom:1.75rem;font-size:.9rem;line-height:1.5}.auth-label{color:var(--text);letter-spacing:.01em;margin-bottom:.4rem;font-size:.8125rem;font-weight:600;display:block}.auth-input{background:var(--input-bg);border:1.5px solid var(--input-border);border-radius:var(--radius-input);width:100%;height:3rem;color:var(--text);outline:none;margin-bottom:1rem;padding:0 1rem;font-family:inherit;font-size:.9375rem;transition:border-color .2s,box-shadow .2s;display:block}.auth-input:focus{border-color:var(--brand-pink);background:#fff;box-shadow:0 0 0 3px #f515821f}.auth-input::placeholder{color:#b0b0b8}.auth-input-wrap{margin-bottom:1rem;position:relative}.auth-input-wrap .auth-input{margin-bottom:0}.auth-input-wrap .toggle-password{cursor:pointer;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;background:0 0;border:none;align-items:center;padding:0;font-size:.8rem;font-weight:600;display:flex;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.auth-btn{background:var(--brand-maroon);color:#fff;border-radius:var(--radius-btn);cursor:pointer;letter-spacing:.01em;border:none;justify-content:center;align-items:center;width:100%;height:3rem;margin-top:.25rem;font-family:inherit;font-size:.9375rem;font-weight:600;text-decoration:none;transition:background .2s,transform .15s;display:flex}.auth-btn:hover{background:var(--brand-pink);transform:translateY(-1px)}.auth-btn:active{transform:none}.auth-btn--outline{color:var(--text);border:1.5px solid var(--border);background:0 0}.auth-btn--outline:hover{background:#f4f4f6;transform:translateY(-1px)}.auth-btn:disabled{opacity:.65;cursor:not-allowed;transform:none}.auth-divider{color:var(--muted);align-items:center;gap:.875rem;margin:1.5rem 0;font-size:.8125rem;display:flex}.auth-divider:before,.auth-divider:after{content:"";background:var(--border);flex:1;height:1px}.auth-socials{gap:.75rem;margin-bottom:1.5rem;display:flex}.social-btn{border:1.5px solid var(--border);border-radius:var(--radius-btn);cursor:pointer;background:#fff;flex:1;justify-content:center;align-items:center;height:2.875rem;font-size:.85rem;font-weight:600;transition:border-color .2s,box-shadow .2s;display:flex}.social-btn:hover{border-color:#c0c0c8;box-shadow:0 2px 8px #0000000f}.social-btn svg{width:20px;height:20px}.auth-error{color:var(--brand-pink);background:#f5158214;border:1px solid #f5158240;border-radius:.75rem;margin:.5rem 0 1rem;padding:.75rem 1rem;font-size:.8125rem;line-height:1.5}.auth-success{color:#16c170;background:#16c17014;border:1px solid #16c17040;border-radius:.75rem;margin:.5rem 0 1rem;padding:.75rem 1rem;font-size:.8125rem;line-height:1.5}.auth-footer-text{text-align:center;color:var(--muted);margin-top:1.25rem;font-size:.85rem}.auth-footer-text a{color:var(--brand-maroon);border-bottom:1.5px solid #0000;font-weight:600;text-decoration:none;transition:border-color .2s}.auth-footer-text a:hover{border-color:var(--brand-pink);color:var(--brand-pink)}.auth-powered-by{text-align:center;color:#bbb;margin-top:1.5rem;font-size:.75rem}.auth-powered-by strong{color:#555;font-weight:700}.otp-inputs{justify-content:center;gap:.625rem;margin-bottom:1.25rem;display:flex}.otp-inputs input{text-align:center;border:1.5px solid var(--input-border);background:var(--input-bg);border-radius:.75rem;outline:none;width:3rem;height:3.5rem;font-size:1.25rem;font-weight:700;transition:border-color .2s,box-shadow .2s}.otp-inputs input:focus{border-color:var(--brand-pink);background:#fff;box-shadow:0 0 0 3px #f515821f}.auth-badge{color:var(--brand-pink);letter-spacing:.03em;background:#f5158214;border-radius:100px;align-items:center;gap:.4rem;margin-bottom:1.5rem;padding:.35rem .75rem;font-size:.75rem;font-weight:600;display:inline-flex}.auth-forgot{text-align:right;margin-top:-.5rem;margin-bottom:1rem}.auth-forgot a{color:var(--brand-maroon);font-size:.8125rem;font-weight:500;text-decoration:none;transition:color .2s}.auth-forgot a:hover{color:var(--brand-pink)}@media (max-width:520px){.auth-shell{grid-template-columns:1fr}.auth-card{grid-column:1;margin:1rem;padding:2rem 1.5rem}}.role-picker{background:#f0f0f4;border-radius:1rem;gap:2px;margin-bottom:1.625rem;padding:4px;display:flex}.role-btn{color:#888;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:.75rem;flex:1;justify-content:center;align-items:center;gap:.3125rem;padding:.5875rem .25rem;font-family:inherit;font-size:.875rem;font-weight:600;transition:all .18s;display:flex}.role-btn:hover:not(.role-btn--active){color:var(--text);background:#ffffff80}.role-btn--active{color:var(--text);background:#fff;box-shadow:0 1px 4px #0000001a,0 0 0 1px #0000000a}.role-btn svg{flex-shrink:0;width:14px;height:14px}.role-btn--active.role-btn--student{color:#330c26}.role-btn--active.role-btn--instructor{color:#4b3fe9}.role-btn--active.role-btn--admin{color:#d97706}.role-notice{border-radius:.75rem;align-items:flex-start;gap:.5rem;margin-bottom:1rem;padding:.625rem .875rem;font-size:.8rem;line-height:1.45;display:none}.role-notice--instructor{color:#3228d4;background:#4b3fe912;border:1px solid #4b3fe92e}.role-notice--admin{color:#92400e;background:#d9770612;border:1px solid #d9770633}.role-notice--visible{display:flex}