.r4-login .r4-login-center{gap:clamp(20px,2.5vh,30px);padding:32px 0}.r4-login-heading{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}.r4-login .r4-login-title{max-width:800px;font-size:clamp(32px,2.6vw,44px);line-height:1.2;text-wrap:balance}.r4-login-title .r4-grad-text{display:block}.r4-login .r4-login-tag{max-width:720px;margin:0;font-size:clamp(16px,1.2vw,19px);line-height:1.5;text-wrap:balance}.r4-login .r4-roles{width:min(100%,680px);grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:4px}.r4-login .r4-role{min-width:0;min-height:292px;gap:12px;padding:26px}.r4-login .r4-role .r4-s{line-height:1.55}.r4-login .r4-login-foot{text-align:center;line-height:1.4}@media (max-width:720px){.r4-login{padding:20px 18px}.r4-login .r4-login-center{padding:32px 0}.r4-login .r4-login-mark{width:88px;height:88px}.r4-login .r4-roles{max-width:420px;grid-template-columns:1fr;gap:16px}.r4-login .r4-role{min-height:0;padding:22px}}body{margin:0;font-family:var(--font-ui);color:white;overflow-x:hidden}.landing-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;background:radial-gradient(ellipse at 15% 20%,rgba(246,160,90,.18) 0,transparent 50%),radial-gradient(ellipse at 85% 75%,rgba(240,128,48,.12) 0,transparent 50%),radial-gradient(ellipse at 50% 50%,#0b0e2e 0,#06071a 100%);overflow:hidden}.landing-container:before{background-image:radial-gradient(white 1px,transparent 0),radial-gradient(rgba(255,255,255,.5) 1px,transparent 0);background-size:60px 60px,120px 120px;background-position:0 0,30px 30px;opacity:.15;animation:stars-drift 80s linear infinite}.landing-container:after,.landing-container:before{content:"";position:absolute;inset:0;pointer-events:none}.landing-container:after{background:radial-gradient(ellipse at 10% 90%,rgba(236,72,153,.08) 0,transparent 40%),radial-gradient(ellipse at 90% 10%,rgba(240,128,48,.06) 0,transparent 40%)}@keyframes stars-drift{0%{transform:translateY(0) translateX(0)}to{transform:translateY(-60px) translateX(-20px)}}.contact-wrapper{position:absolute;top:2rem;right:2rem;z-index:10}.contact-btn{background:rgba(240,128,48,.08);border:1px solid rgba(240,128,48,.4);color:var(--neon-cyan);padding:.6rem 1.75rem;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:inherit;letter-spacing:.04em}.contact-btn:hover{background:var(--neon-cyan);color:#06071a;box-shadow:0 0 24px rgba(240,128,48,.5)}.landing-content{text-align:center;max-width:1400px;width:100%;z-index:1;position:relative}.landing-title{font-size:3.2rem;font-weight:800;color:white;margin-bottom:.75rem;line-height:1.15;letter-spacing:-.02em;text-shadow:0 0 40px rgba(240,128,48,.2)}.landing-subtitle{font-size:1.2rem;color:rgba(255,255,255,.55);margin-bottom:4rem;letter-spacing:.01em}.role-cards{display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:1.5rem;padding:0 1rem;align-items:center;max-width:1500px;margin:0 auto}.role-card{background:rgba(19,25,82,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:1.5rem;padding:2.5rem 2rem;cursor:pointer;transition:all .45s cubic-bezier(.175,.885,.32,1.275);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:1.25rem;min-height:420px;opacity:.82}.role-card:not(.student){transform:scale(.91)}.role-card:before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent)}.card-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:220px;height:220px;border-radius:50%;opacity:0;transition:all .5s ease;pointer-events:none;filter:blur(40px)}.role-card:hover .card-glow{opacity:.6}.role-card:not(.student):hover{transform:scale(.95) translateY(-8px);opacity:1}.role-icon{width:72px;height:72px;margin-bottom:.5rem;transition:all .3s ease}.role-icon svg{width:100%;height:100%;stroke-width:1.5}.role-title{font-size:1.65rem;font-weight:800;margin:0;text-transform:uppercase;letter-spacing:.04em}.role-description{font-size:.95rem;color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:auto;max-width:85%}.role-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.75);padding:.7rem 2rem;border-radius:50px;font-size:.925rem;font-weight:700;cursor:pointer;transition:all .3s ease;margin-top:.5rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-family:inherit;letter-spacing:.04em;text-transform:uppercase}.role-card.admin .role-icon{color:var(--neon-gold)}.role-card.admin .role-icon svg{filter:drop-shadow(0 0 12px rgba(246,160,90,.7))}.role-card.admin .role-title{color:var(--neon-gold)}.role-card.admin .card-glow{background:var(--neon-gold)}.role-card.admin.selected,.role-card.admin:hover{border-color:rgba(246,160,90,.5);box-shadow:0 0 40px rgba(246,160,90,.25),0 0 80px rgba(246,160,90,.1)}.role-card.admin:hover .role-btn{background:var(--neon-gold);color:#06071a;border-color:var(--neon-gold);box-shadow:0 0 20px rgba(246,160,90,.5)}.role-card.student{min-height:580px;padding:3.5rem 2.5rem;opacity:1;z-index:10;background:rgba(19,25,82,.75);border:1.5px solid rgba(240,128,48,.4);box-shadow:0 0 50px rgba(240,128,48,.15)}.role-card.student .role-icon{width:110px;height:110px;color:var(--neon-cyan)}.role-card.student .role-icon svg{filter:drop-shadow(0 0 16px rgba(240,128,48,.7))}.role-card.student .role-title{font-size:2.75rem;color:var(--neon-cyan);text-shadow:0 0 20px rgba(240,128,48,.4)}.role-card.student .role-description{font-size:1.1rem;max-width:90%}.role-card.student .card-glow{background:var(--neon-cyan)}.role-card.student.selected,.role-card.student:hover{border-color:var(--neon-cyan);box-shadow:0 0 70px rgba(240,128,48,.35),0 0 120px rgba(240,128,48,.1);transform:translateY(-18px) scale(1.04)}.role-card.student .role-btn{padding:1rem 3.5rem;font-size:1.1rem;background:rgba(240,128,48,.15);border-color:rgba(240,128,48,.5);color:var(--neon-cyan);margin-top:auto;box-shadow:0 0 16px rgba(240,128,48,.25)}.role-card.student:hover .role-btn{background:var(--neon-cyan);color:#06071a;box-shadow:0 0 40px rgba(240,128,48,.6)}.role-card.teacher .role-icon{color:var(--neon-violet)}.role-card.teacher .role-icon svg{filter:drop-shadow(0 0 12px rgba(246,160,90,.7))}.role-card.teacher .role-title{color:var(--neon-violet)}.role-card.teacher .card-glow{background:var(--neon-violet)}.role-card.teacher.selected,.role-card.teacher:hover{border-color:rgba(246,160,90,.5);box-shadow:0 0 40px rgba(246,160,90,.25),0 0 80px rgba(246,160,90,.1)}.role-card.teacher:hover .role-btn{background:var(--neon-violet);color:white;border-color:var(--neon-violet);box-shadow:0 0 20px rgba(246,160,90,.5)}@media (max-width:1024px){.role-cards{gap:1rem}.landing-title{font-size:2.4rem}.contact-wrapper{position:relative;top:auto;right:auto;margin-bottom:2rem;display:flex;justify-content:center}}@media (max-width:768px){.landing-container{flex-direction:column;justify-content:flex-start;padding-top:4rem}.role-cards{grid-template-columns:1fr;max-width:420px;margin:0 auto}.role-card:not(.student){transform:scale(1);opacity:1}.role-card.student{min-height:auto;padding:2.5rem 2rem}.role-card.student .role-title{font-size:2rem}.landing-title{font-size:1.9rem}.landing-subtitle{font-size:1rem;margin-bottom:2rem}}.login-wrapper{position:relative;z-index:1;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.login-back-btn{align-self:flex-start;background:transparent;border:1px solid rgba(246,160,90,.3);color:rgba(255,255,255,.6);padding:.5rem 1.25rem;border-radius:8px;font-size:.9rem;cursor:pointer;font-family:inherit;transition:all .2s}.login-back-btn:hover{color:white;border-color:rgba(246,160,90,.6);background:rgba(246,160,90,.1)}.login-card{width:100%;background:rgba(19,25,82,.75);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(246,160,90,.35);border-radius:1.5rem;padding:2.5rem 2rem;box-shadow:0 0 60px rgba(246,160,90,.15),0 0 120px rgba(246,160,90,.05);display:flex;flex-direction:column;align-items:center;gap:1rem}.login-icon{width:64px;height:64px;color:var(--neon-violet);margin-bottom:.5rem}.login-icon svg{width:100%;height:100%;filter:drop-shadow(0 0 14px rgba(246,160,90,.7))}.login-title{font-size:1.6rem;font-weight:800;color:var(--neon-violet);margin:0;text-align:center}.login-subtitle{font-size:.9rem;color:rgba(255,255,255,.45);text-align:center;margin:0}.login-form{width:100%;gap:1rem;margin-top:.5rem}.login-field,.login-form{display:flex;flex-direction:column}.login-field{gap:.4rem}.login-field label{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.03em}.login-field input{background:rgba(255,255,255,.05);border:1px solid rgba(246,160,90,.3);border-radius:10px;padding:.75rem 1rem;color:white;font-size:1rem;font-family:inherit;outline:none;transition:all .2s}.login-field input::placeholder{color:rgba(255,255,255,.2)}.login-field input:focus{border-color:var(--neon-violet);background:rgba(246,160,90,.08);box-shadow:0 0 16px rgba(246,160,90,.2)}.login-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:.6rem 1rem;font-size:.88rem;color:#fca5a5;text-align:center}.login-submit-btn{background:linear-gradient(135deg,var(--brand-grad-b),var(--brand-grad-a));border:none;border-radius:10px;padding:.9rem;color:white;font-size:1rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .3s ease;letter-spacing:.03em;margin-top:.5rem;box-shadow:0 0 24px rgba(246,160,90,.35)}.login-submit-btn:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,var(--brand-grad-b));box-shadow:0 0 40px rgba(246,160,90,.55);transform:translateY(-1px)}.login-submit-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.login-dev-hint{width:100%;border-top:1px solid rgba(255,255,255,.07);padding-top:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}.login-dev-hint p{font-size:.78rem;color:rgba(255,255,255,.3);margin:0}.login-dev-hint button{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:.35rem 1rem;color:rgba(255,255,255,.45);font-size:.8rem;font-family:inherit;cursor:pointer;transition:all .2s;width:100%}.login-dev-hint button:hover{background:rgba(246,160,90,.1);border-color:rgba(246,160,90,.3);color:rgba(255,255,255,.7)}[data-theme=light] body{color:#0f172a}[data-theme=light] .landing-container{background:radial-gradient(ellipse at 15% 20%,rgba(124,58,237,.1) 0,transparent 50%),radial-gradient(ellipse at 85% 75%,rgba(8,145,178,.1) 0,transparent 50%),linear-gradient(180deg,#f6f8fc,#eef1f8)}[data-theme=light] .landing-container:before{opacity:.05;filter:invert(1)}[data-theme=light] .landing-container:after{opacity:.5}[data-theme=light] .landing-title{color:#0f172a;text-shadow:0 2px 24px rgba(8,145,178,.12)}[data-theme=light] .landing-subtitle{color:rgba(15,23,42,.6)}[data-theme=light] .role-card{background:rgba(255,255,255,.86);border-color:rgba(15,23,42,.08);box-shadow:0 8px 28px rgba(15,23,42,.08)}[data-theme=light] .role-card:before{background:linear-gradient(90deg,transparent,rgba(15,23,42,.1),transparent)}[data-theme=light] .role-card.student{background:rgba(255,255,255,.95);border-color:rgba(8,145,178,.4);box-shadow:0 12px 40px rgba(8,145,178,.14)}[data-theme=light] .role-description{color:rgba(15,23,42,.62)}[data-theme=light] .role-btn{border-color:rgba(15,23,42,.2);color:rgba(15,23,42,.7)}[data-theme=light] .login-card{background:rgba(255,255,255,.95);border-color:rgba(124,58,237,.3);box-shadow:0 16px 48px rgba(124,58,237,.12)}[data-theme=light] .login-subtitle{color:rgba(15,23,42,.5)}[data-theme=light] .login-field label{color:rgba(15,23,42,.65)}[data-theme=light] .login-field input{background:rgba(15,23,42,.03);border-color:rgba(124,58,237,.3);color:#0f172a}[data-theme=light] .login-field input::placeholder{color:rgba(15,23,42,.35)}[data-theme=light] .login-field input:focus{background:rgba(124,58,237,.05)}[data-theme=light] .login-back-btn{color:rgba(15,23,42,.6);border-color:rgba(124,58,237,.3)}[data-theme=light] .login-back-btn:hover{color:#0f172a}[data-theme=light] .login-error{color:#b91c1c}[data-theme=light] .login-dev-hint{border-top-color:rgba(15,23,42,.08)}[data-theme=light] .login-dev-hint p{color:rgba(15,23,42,.4)}[data-theme=light] .login-dev-hint button{background:rgba(15,23,42,.03);border-color:rgba(15,23,42,.1);color:rgba(15,23,42,.6)}