/* GRITA SASPITA | Premium Login v1.0 — no remote dependencies */
:root{--forest:#063d2e;--forest-dark:#032c22;--forest-mid:#0a6c50;--gold:#e8bd65;--gold-pale:#fff2d6;--ink:#19362d;--muted:#74847e;--border:#dfe9e3;--cream:#f6f8f4;--focus:rgba(14,118,84,.16)}
*,*::before,*::after{box-sizing:border-box}html{min-width:320px;min-height:100%;scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#f0f5ef,#e3ece5);color:var(--ink);font:400 14px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #c49748;outline-offset:3px}.skip-link{position:absolute;z-index:999;top:-80px;left:20px;padding:10px 20px;background:#fff;color:#03452f;border-radius:0 0 12px 12px}.skip-link:focus{top:0}.page-wrap{min-height:100svh;display:grid;place-items:center;padding:34px 28px;position:relative;isolation:isolate;overflow:hidden}.page-wrap:before,.page-wrap:after{content:"";position:absolute;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(2px)}.page-wrap:before{width:420px;height:420px;left:-180px;bottom:-130px;background:radial-gradient(circle,rgba(10,123,76,.18),transparent 70%)}.page-wrap:after{width:390px;height:390px;right:-130px;top:-100px;background:radial-gradient(circle,rgba(240,196,113,.20),transparent 70%)}.login-frame{width:min(1180px,100%);min-height:690px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);background:#fff;box-shadow:0 26px 90px rgba(5,51,33,.14),0 5px 20px rgba(5,51,33,.07);border:1px solid rgba(255,255,255,.74);border-radius:27px;overflow:hidden;position:relative}
.visual-panel{position:relative;min-width:0;overflow:hidden;min-height:690px;background:var(--forest-dark);color:#fff;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}.campus-image{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:47% 40%;animation:photo-breathe 24s ease-in-out infinite alternate}.campus-gradient{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(2,45,32,.32) 0%,rgba(2,37,29,.26) 24%,rgba(3,41,30,.50) 46%,rgba(2,33,26,.94) 81%,#032f25 100%)}.visual-pattern{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.3;background-image:radial-gradient(circle at center,rgba(245,214,141,.22) .7px,transparent 1px);background-size:23px 23px;mask-image:linear-gradient(180deg,transparent 10%,#000 90%)}.visual-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:33px 36px}.back-link{display:inline-flex;gap:7px;align-items:center;color:#fff;font-size:12px;font-weight:650;padding:9px 11px 9px 8px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(2,39,28,.29);backdrop-filter:blur(8px);transition:background .2s,border-color .2s,transform .2s}.back-link svg{width:16px;height:16px}.back-link:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.6);transform:translateX(-2px)}.visual-mark{display:inline-flex;gap:7px;align-items:center;font-size:9px;letter-spacing:.15em;font-weight:800;color:#f5d998;white-space:nowrap}.visual-mark span{width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 11px rgba(245,211,121,.9)}.visual-content{position:relative;z-index:3;padding:24px 42px 30px;margin-top:auto}.headline-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(242,204,118,.14);border:1px solid rgba(242,204,118,.52);border-radius:999px;padding:5px 12px;font-size:10px;font-weight:750;letter-spacing:.11em;color:#f7d690}.chip-led{height:6px;width:6px;border-radius:50%;background:#ffd989;box-shadow:0 0 9px #ffd989;animation:led-pulse 3s ease-in-out infinite}.chip-simple{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#f7f7f7}.visual-eyebrow{margin:0 0 3px;font-size:16px;letter-spacing:.03em;font-weight:500;color:#e9f5ef}.visual-content h1{margin:0 0 3px;font:700 clamp(38px,4.6vw,63px)/1.11 Georgia,serif;letter-spacing:-.037em;text-shadow:0 6px 28px rgba(0,0,0,.16);white-space:nowrap}.visual-content h1 span{color:#f3d388}.visual-subtitle{font-weight:700;font-size:21px;line-height:1.3;margin:9px 0 19px}.visual-subtitle span{display:block;font-size:13px;font-weight:600;letter-spacing:.028em;color:#e6ebe6;margin-top:4px}.visual-copy{font-size:14px;max-width:490px;line-height:1.77;margin:0 0 26px;color:#f1f8f1}.visual-tags{display:flex;flex-wrap:wrap;gap:7px}.visual-tags span{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);border-radius:10px;font-size:10.5px;padding:8px 10px;font-weight:650;backdrop-filter:blur(6px)}.visual-tags svg{width:15px;height:15px;stroke:#f7d58b}.visual-bottom{position:relative;z-index:3;display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0 42px;padding:17px 0 27px;font-size:10px;font-weight:550;color:#bfd7c8;border-top:1px solid rgba(255,255,255,.17)}.visual-line{width:17px;height:2px;border-radius:4px;background:var(--gold)}.floating-book{pointer-events:none;z-index:3;position:absolute;right:30px;top:23%;width:123px;opacity:.88;filter:drop-shadow(0 10px 28px rgba(17,31,17,.25));transform:rotate(14deg);animation:float-book 7s ease-in-out infinite alternate}.floating-book svg{display:block;width:100%;height:auto;stroke:none}.ambient{position:absolute;border-radius:50%;pointer-events:none;opacity:.95;z-index:1;animation:orb-drift 9s ease-in-out infinite alternate}.ambient.amber{background:#efc774;box-shadow:0 0 12px 3px rgba(253,212,120,.65),0 0 38px 8px rgba(253,212,120,.23)}.ambient.jade{background:#b9fbd4;box-shadow:0 0 12px 3px rgba(137,231,181,.6),0 0 38px 8px rgba(137,231,181,.23)}.ambient.one{height:4px;width:4px;left:18%;top:31%}.ambient.two{height:5px;width:5px;right:12%;top:45%;animation-delay:-2s}.ambient.three{height:3px;width:3px;left:57%;top:19%;animation-delay:-5s}
.form-panel{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top right,#f6f7f2 0,transparent 45%),#fff;padding:46px clamp(27px,4.25vw,66px);position:relative}.form-panel:after{content:"";position:absolute;top:0;right:0;border-top:90px solid rgba(222,190,123,.12);border-left:90px solid transparent;pointer-events:none}.form-inner{width:100%;max-width:390px;position:relative;z-index:1}.identity-bar{display:flex;align-items:center;gap:13px;margin-bottom:53px}.identity-logo{width:55px;height:55px;flex:none;display:grid;place-items:center;border-radius:16px;background:#f6f8f4;border:1px solid #e7eae1;box-shadow:0 7px 18px rgba(9,62,45,.07);overflow:hidden}.identity-logo img{width:47px;height:47px;object-fit:contain}.identity-bar strong{display:block;line-height:1.25;color:#0b5139;font-size:18px;letter-spacing:.025em;font-family:Georgia,serif}.identity-bar small{display:block;font-weight:700;font-size:10px;letter-spacing:.045em;line-height:1.6;color:#7b8880}.section-label{display:inline-flex;align-items:center;gap:8px;color:#9b7a38;font-weight:800;font-size:10px;letter-spacing:.17em}.section-label span{width:15px;height:2px;background:var(--gold)}.login-intro h2{font-size:clamp(28px,3vw,37px);letter-spacing:-.045em;line-height:1.18;margin:10px 0 12px;color:#132f26;font-weight:780}.dot{color:#ccaa58}.login-intro p{color:#77847e;margin:0 0 32px;font-size:13px;line-height:1.8}.login-form{display:block}.field{margin-bottom:20px}.field label{font-weight:750;font-size:12px;color:#283d34;display:block;margin-bottom:9px}.control-wrap{position:relative}.field-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);height:19px;width:19px;color:#8b9e91;pointer-events:none}.control-wrap input{display:block;width:100%;height:54px;border:1px solid var(--border);background:#fbfcfa;color:#14342a;padding:0 16px 0 46px;font-size:13px;outline:0;border-radius:12px;transition:border-color .2s,box-shadow .2s,background .2s}.control-wrap input::placeholder{color:#9ca8a1}.control-wrap input:hover{border-color:#b8d0c1}.control-wrap input:focus{background:#fff;border-color:#159068;box-shadow:0 0 0 4px var(--focus)}.control-wrap:focus-within .field-icon{color:#13865f}.control-wrap input[type=password],.control-wrap input[data-password-visible]{padding-right:60px}.label-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.field-note{color:#9fa9a2;font-size:10.5px}.toggle-password{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:42px;height:42px;border:0;background:transparent;color:#68877a;border-radius:10px;transition:color .2s,background .2s}.toggle-password:hover{background:#eef7f0;color:#0c6f4f}.toggle-password svg{width:19px;height:19px}.toggle-password .eye-slash{display:none}.toggle-password[aria-pressed=true] .eye-slash{display:block}.caps-hint{margin-top:8px;color:#a96e18;font-size:11px}.caps-hint[hidden]{display:none}.login-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:11px;border:0;border-radius:12px;padding:16px 20px;min-height:55px;color:#fff;background:linear-gradient(112deg,#065a40,#087252,#095b42);font-size:13.5px;font-weight:800;letter-spacing:.015em;box-shadow:0 10px 22px rgba(10,100,69,.20);transition:transform .2s,box-shadow .2s,filter .2s}.login-submit:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(10,100,69,.27);filter:brightness(1.05)}.login-submit:active{transform:translateY(0)}.login-submit:disabled{cursor:wait;opacity:.84}.login-submit svg{width:18px;height:18px}.login-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border:1px solid #f1bbbb;border-radius:11px;background:#fff5f3;margin:0 0 20px;color:#9e3224;font-size:12px}.login-alert svg{width:18px;height:18px;flex:none;margin-top:1px}.login-alert ul{padding-left:15px;margin:0}.access-note{display:flex;align-items:flex-start;gap:12px;margin:29px 0 0;padding:15px 16px;border-radius:12px;border:1px solid #e9efdf;background:#f7faf4}.access-note-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:#e5f0e7;color:#116c4f}.access-note-icon svg{width:18px;height:18px}.access-note strong{display:block;font-size:11.5px;color:#25513e}.access-note small{display:block;color:#73877a;font-size:11px;line-height:1.55;margin-top:2px}.form-footer{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:31px 0 0;padding-top:19px;border-top:1px solid #e9ede8;color:#9ca89f;font-size:10px}.form-footer a{display:inline-flex;align-items:center;gap:4px;margin-left:auto;color:#1b7553;font-weight:750;transition:color .2s}.form-footer a:hover{color:#074e37}.form-footer svg{height:12px;width:12px}
@keyframes float-book{from{transform:translateY(-4px) rotate(11deg)}to{transform:translateY(14px) rotate(16deg)}}@keyframes photo-breathe{from{transform:scale(1.04)}to{transform:scale(1.14)}}@keyframes led-pulse{0%,100%{opacity:.55}50%{opacity:1}}@keyframes orb-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(20px,-15px,0)}}
@media(min-width:1200px) and (min-height:830px){.login-frame{min-height:710px}}@media(max-width:1070px){.login-frame{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.form-panel{padding:36px 30px}.visual-content{padding-left:31px;padding-right:31px}.visual-bottom{margin:0 31px}.visual-content h1{font-size:44px}.floating-book{width:95px;right:10px}.visual-top{padding:29px 26px}.visual-mark{font-size:8px}}@media(max-width:820px){.page-wrap{padding:20px 14px}.login-frame{max-width:620px;grid-template-columns:1fr;min-height:0;border-radius:22px}.visual-panel{min-height:258px}.visual-top{padding:19px 24px 0}.visual-content{padding:28px 26px 18px}.headline-chips{margin-bottom:9px}.visual-eyebrow{font-size:11px}.visual-content h1{font-size:40px}.visual-subtitle{font-size:14px;margin:3px 0 9px}.visual-subtitle span{font-size:10px}.visual-copy{font-size:11px;line-height:1.55;max-width:420px;margin:0}.visual-tags,.visual-bottom,.floating-book{display:none}.form-panel{padding:25px 31px 25px}.form-inner{max-width:460px}.identity-bar{margin-bottom:28px}.login-intro p{margin-bottom:21px}.field{margin-bottom:15px}.access-note{margin-top:22px}.form-footer{margin-top:18px}}@media(max-width:480px){.page-wrap{display:block;padding:0;background:#fff}.login-frame{max-width:none;min-height:100svh;border-radius:0;border:0;box-shadow:none}.visual-panel{min-height:235px}.visual-top{padding:14px 18px 0}.back-link{font-size:10px;padding:7px 10px 7px 6px}.back-link svg{width:15px}.visual-mark{font-size:8px;letter-spacing:.07em}.visual-content{padding:20px 22px 22px}.headline-chips{margin-bottom:8px}.chip{padding:4px 9px;font-size:8.5px}.chip-simple{display:none}.visual-content h1{font-size:38px}.visual-copy{max-width:335px}.form-panel{padding:22px 23px 20px;align-items:flex-start}.identity-bar{margin-bottom:22px}.identity-logo{height:47px;width:47px;border-radius:13px}.identity-logo img{height:39px;width:39px}.identity-bar strong{font-size:17px}.identity-bar small{font-size:9px}.login-intro h2{font-size:30px}.login-intro p{font-size:12px;margin:0 0 21px}.control-wrap input{height:51px}.toggle-password{top:5px;right:5px;height:41px}.login-submit{min-height:52px}.access-note{padding:12px 13px}.form-footer{font-size:9.5px}}@media(max-width:365px){.visual-content h1{font-size:32px}.visual-mark{display:none}.form-panel{padding:19px 18px}.form-footer a{width:100%;margin-left:0;margin-top:4px}.headline-chips .chip{font-size:8px}}@media(max-height:690px) and (min-width:821px){.page-wrap{padding:14px}.login-frame,.visual-panel{min-height:600px}.form-panel{padding-top:25px;padding-bottom:25px}.identity-bar{margin-bottom:32px}.login-intro p{margin-bottom:19px}.visual-tags{display:none}.visual-content{padding-bottom:23px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}@media(prefers-contrast:more){.control-wrap input{border-color:#49715a}.visual-panel{background:#012118}.campus-gradient{background:rgba(0,26,18,.78)}}