body:not(.signed-in){background:radial-gradient(ellipse at 12% 8%,#cceafa70,transparent 45%),radial-gradient(ellipse at 88% 95%,#d2e6f780,transparent 48%),#f5f7fc}
body:not(.signed-in)>.topbar{background:transparent;border:0;box-shadow:none;max-width:1320px;margin:auto;padding:18px 40px;height:94px}
body:not(.signed-in)>.topbar .brand{visibility:visible}body:not(.signed-in)>main{max-width:1250px;padding:22px 36px 44px;min-height:calc(100dvh - 155px)}
#login-screen.welcome{grid-template-columns:1.08fr 1fr;gap:65px;min-height:620px;align-items:center}
#login-screen .login-story{position:relative;padding:40px 30px 40px 10px;isolation:isolate}
.login-story::before{content:'';position:absolute;width:330px;height:330px;border:1px solid #124b7b0b;border-radius:50%;top:0;right:-90px;z-index:-1;box-shadow:0 0 0 50px #124b7b03,0 0 0 100px #124b7b02}
.login-brand-tile{display:grid;place-items:center;width:112px;height:100px;border-radius:24px;background:white;box-shadow:0 12px 30px #124b7b0c;border:1px solid #e5e8f1;margin-bottom:30px}.login-brand-tile img{width:85px;height:80px;object-fit:contain}
#login-screen .intro h1{font-size:48px;letter-spacing:-.7px;line-height:1.65;margin:14px 0 18px;color:#163f64}#login-screen .intro>p{font-size:16px;max-width:450px;line-height:2;color:#6c7590}
.login-service-preview{display:flex;gap:12px;margin-top:30px}.login-service-preview>div{flex:1;min-width:0;border:1px solid #e3e6f1;background:#ffffffad;border-radius:18px;padding:16px 12px}.login-service-preview span{display:grid;place-items:center;width:33px;height:33px;border-radius:11px;background:#eaf3fa;color:#386c97;font-size:22px;margin-bottom:12px}.login-service-preview>div:nth-child(2) span{background:#e4f2fb;color:#216d9b}.login-service-preview>div:nth-child(3) span{background:#e6f2ed;color:#327762}.login-service-preview strong{display:block;font-size:13px}.login-service-preview small{display:block;font-size:10px;line-height:1.9;color:#748099;margin-top:6px}
#login-screen .login-card{padding:38px 40px;border:1px solid #e0e4f0;border-radius:30px;background:#ffffffed;box-shadow:0 25px 80px #124b7b10;position:relative;overflow:hidden}#login-screen .login-card::before{content:'';position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#4eb9df,#246ab2,#124b7b)}
.login-card-mark{display:none}#login-screen .login-card h2{font-size:29px;color:#163f64;margin-bottom:9px}#login-screen .login-card>.eyebrow{font-size:12px;margin-bottom:13px}#login-screen .login-card>.muted{margin-bottom:25px}
.login-sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);padding:0!important;border:0!important;margin:-1px!important}
.login-role-picker{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;background:#f0f2f9;border-radius:16px;margin-bottom:25px}.login-role-picker button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:47px;border-radius:12px;background:transparent;color:#717994;font-size:14px;border:1px solid transparent}.login-role-picker button span{font-size:20px}.login-role-picker button[aria-pressed=true]{background:white;color:#124b7b;border-color:#e3ebf1;box-shadow:0 4px 12px #124b7b0a}
#login-form label{font-size:13px;margin:19px 0 9px}#login-form input{min-height:54px;border-radius:13px;background:#fbfcff;border-color:#dfe3ef;padding:14px 16px;font-size:16px;transition:border-color .18s,box-shadow .18s}#login-form input:focus{outline:0;border-color:#5377bd;box-shadow:0 0 0 4px #216ca811;background:white}#login-form input::placeholder{font-size:13px;color:#949bb0}
.login-password-wrap{position:relative}.login-password-wrap input{padding-left:72px!important}.login-password-wrap button{position:absolute;left:7px;top:7px;bottom:7px;padding:5px 11px;min-width:54px;border-radius:10px;background:#edf3f8;color:#3f6788;font-size:12px}.login-field-hint{font-size:12px;color:#8f6625;margin:9px 0 0}
#login-screen .login-submit{margin-top:28px;min-height:55px;border-radius:14px;padding:14px 20px;background:linear-gradient(115deg,#124b7b,#246ab2);box-shadow:0 8px 22px #124b7b22;transition:transform .2s,box-shadow .2s}.login-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 26px #124b7b30}.login-submit-icon{font-size:22px;line-height:1}#login-form[aria-busy=true] .login-submit-icon{font-size:0;border:2px solid #ffffff50;border-top-color:white;width:19px;height:19px;border-radius:50%;animation:login-spin .8s linear infinite}
#login-screen .login-note{display:flex;gap:10px;align-items:start;line-height:1.9;margin-top:24px;padding-top:20px;font-size:11px}#login-screen .login-note>span:first-child{color:#5880a0;font-size:18px}
#awal-intro{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:24px;overflow:hidden;background:radial-gradient(ellipse at 50% 25%,#ecf7ff,#f3f7fb 65%,#e8f0f7);color:#163f64;text-align:center;align-content:center}#awal-intro::backdrop{background:#f3f7fb}.showing-intro{overflow:hidden}
.intro-logo-stage{position:relative;width:260px;height:250px;margin:0 auto 22px;display:grid;place-items:center}.intro-logo-stage img{position:relative;z-index:1;width:200px;height:180px;object-fit:contain;animation:intro-logo-in .8s ease-out both}.intro-orbit{position:absolute;inset:0;border:1px solid #216ca81a;border-radius:50%;animation:login-spin 12s linear infinite}.intro-orbit::before{content:'';position:absolute;top:25px;right:28px;width:13px;height:13px;background:#46b5de;border:4px solid #e4f5fc;border-radius:50%;box-shadow:0 0 20px #46b5de65}.intro-orbit::after{content:'';position:absolute;inset:17px;border:1px dashed #216ca81a;border-radius:50%}
.intro-kicker{font-size:10px;letter-spacing:2px;color:#7a83a4;margin-bottom:18px}#awal-intro-title{font-size:30px;margin:0 0 10px}#awal-intro-caption{font-size:15px;color:#77809b}.intro-progress{width:150px;height:4px;background:#dfe8ef;border-radius:5px;margin:30px auto 25px;overflow:hidden;direction:ltr}.intro-progress span{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,#124b7b,#4ab7de);animation:intro-progress 5s linear both}#awal-intro-skip{background:#ffffffb0;border:1px solid #dce6ee;color:#5c768c;font-size:12px;min-height:44px;border-radius:14px;padding:10px 23px}.intro-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 25% 65%,#58bfeb0c,transparent 40%)}
@keyframes login-spin{to{transform:rotate(360deg)}}@keyframes intro-logo-in{from{opacity:0;transform:scale(.85) translateY(12px)}to{opacity:1;transform:none}}@keyframes intro-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:1000px){#login-screen.welcome{gap:30px}#login-screen .intro h1{font-size:38px}#login-screen .login-card{padding:30px}.login-service-preview{gap:7px}.login-service-preview small{font-size:9px}}
@media(max-width:700px){body:not(.signed-in)>.topbar{display:none}body:not(.signed-in)>main{padding:28px 18px;min-height:calc(100dvh - 60px)}#login-screen.welcome{display:block;min-height:0;max-width:460px;margin:auto}#login-screen .login-story{display:none}#login-screen .login-card{padding:26px 24px;border-radius:26px}.login-card-mark{display:block;margin-bottom:20px}.login-card-mark img{width:85px;height:72px;object-fit:contain}#login-screen .login-card h2{font-size:26px}#login-screen .login-card>.muted{font-size:12px;margin-bottom:21px}.login-role-picker{margin-bottom:20px}.login-role-picker button{font-size:13px}#login-screen .login-note{font-size:10px}.intro-logo-stage{width:220px;height:220px}.intro-logo-stage img{width:170px;height:150px}#awal-intro-title{font-size:27px}}
@media(prefers-reduced-motion:reduce){#awal-intro *,#login-screen *{animation:none!important;transition:none!important}.intro-progress span{transform:none}.login-submit:hover:not(:disabled){transform:none}}
.login-register-link{display:block;text-align:center;margin-top:22px;padding:14px;border:1px solid #bfdced;border-radius:12px;color:#176eb5;background:#f0f8ff;font-size:14px;font-weight:700}.login-verify-link{display:block;text-align:center;color:#5d7d95;font-size:11px;margin-top:12px}
