@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
:root {color-scheme:dark;--ice:#c6e9ff;--pink:#f28bb7}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:#f7f5ff;background:#090f20}
button,input{font:inherit}
.login-page{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.scene,.scene-shade{position:absolute;inset:0;z-index:-2;pointer-events:none}
.scene{background:url('../images/login-back1.webp') center center/cover no-repeat}
.scene-shade{z-index:-1;background:linear-gradient(90deg,transparent 38%,rgba(4,9,25,.13) 53%,rgba(4,9,25,.18) 100%)}
.eyebrow{position:absolute;top:19px;right:4%;margin:0;font-size:11px;letter-spacing:.24em;text-shadow:0 1px 8px #000}
.welcome-area{width:min(43%,560px);margin:clamp(65px,7vh,110px) 10% 35px auto;display:flex;align-items:center;flex-direction:column}
.brand{display:block;width:min(100%,530px);height:auto;object-fit:contain;filter:drop-shadow(0 0 8px #4b2a6b77);margin:0 auto 28px}
.signin-card{width:92%;padding:30px 36px 31px;border:1px solid rgba(190,210,250,.5);border-radius:14px;background:linear-gradient(140deg,rgba(16,33,57,.73),rgba(11,17,35,.75));box-shadow:0 12px 45px #0006,inset 0 0 30px #b8c4ff0b;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(27px,2.5vw,37px);font-weight:400;text-align:center;color:var(--ice);margin:0 0 7px}
.intro{font-size:clamp(12px,1.1vw,15px);line-height:1.65;text-align:center;margin:0 0 21px}
.field{display:flex;align-items:center;gap:14px;width:100%;height:49px;padding:0 14px;margin-bottom:10px;border:1px solid #9baecb75;border-radius:10px;background:#09142780}
.field:focus-within{border-color:#d9a8ff;box-shadow:0 0 0 2px #d9a8ff28}
.field svg{width:23px;height:23px;flex:none;fill:none;stroke:#c1e8ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.field input{width:100%;min-width:0;color:white;background:transparent;border:0;outline:0;font-size:14px}
.field input::placeholder{color:#e5e4f0}
.show-password{background:none;border:0;padding:6px;cursor:pointer;color:var(--ice)}
.show-password svg{width:20px;height:20px}
.show-password[aria-pressed="true"] .eye-slash{display:none}
.remember{display:flex;align-items:center;gap:9px;margin:14px 0 20px;font-size:13px;cursor:pointer}
.remember input{appearance:none;width:17px;height:17px;margin:0;border:1px solid #b9dbff;border-radius:3px;background:#0a1225;cursor:pointer}
.remember input:checked{background:#b765dc;box-shadow:inset 0 0 0 3px #0a1225}
.login-button{width:100%;height:53px;border:1px solid #f8a4db66;border-radius:10px;color:white;font-size:20px;background:linear-gradient(105deg,#fb94a3,#b86ac6 60%,#7733b5);cursor:pointer;transition:filter .2s,transform .2s}
.login-button:hover{filter:brightness(1.12)}
.login-button:active{transform:scale(.99)}
.login-button span{font-size:28px;vertical-align:-2px;margin-left:8px}
.error{padding:10px;border:1px solid #ff8caa;background:#571a32a8;border-radius:8px;font-size:13px}
blockquote{margin:25px 0 0;text-align:center;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:clamp(16px,1.6vw,23px);line-height:1.5;text-shadow:0 2px 10px #000}
blockquote cite{display:block;margin-top:6px;font-style:normal}
blockquote cite span{color:#f78dba;font-size:29px;vertical-align:-3px}
.feature-bar{margin-top:auto;min-height:120px;padding:18px 3%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;border-top:1px solid #d2d6ff60;background:linear-gradient(120deg,#141321c7,#0b1422d9);backdrop-filter:blur(12px)}
.feature{min-width:0;display:flex;align-items:center;justify-content:center;gap:15px;padding:4px 10px;border-right:1px solid #c1b7db40}
.feature:last-child{border:0}
.feature-icon{font-size:35px;color:#bce6ff;line-height:1}
.feature strong{display:block;font-weight:400;font-size:11px;letter-spacing:.12em}
.feature small{display:block;font-size:11px;line-height:1.5;color:#e1deea;margin-top:5px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:900px){
 .login-page{min-height:100svh}
 .scene{background-image:url('../images/login-back2.webp');background-position:center top;background-size:100% auto;background-color:#090e1d}
 .scene-shade{background:linear-gradient(to bottom,transparent 0%,transparent 35%,#080d1a55 52%,#070c19eb 76%,#080d1a 100%)}
 .eyebrow{display:none}
 .welcome-area{width:min(100% - 28px,540px);margin:22px auto 28px;padding-top:0}
 .brand{width:min(96%,490px);margin-bottom:clamp(230px,54vw,430px)}
 .signin-card{width:100%;padding:25px 23px 27px;border-radius:20px}
 h1{font-size:31px}
 .intro{font-size:14px}
 .field{height:52px}
 blockquote{font-size:19px;margin-top:24px}
 .feature-bar{padding:23px 12px 27px;gap:10px;border-radius:28px 28px 0 0;grid-template-columns:repeat(5,minmax(0,1fr))}
 .feature{flex-direction:column;gap:9px;text-align:center;padding:0 3px;align-self:stretch;justify-content:flex-start}
 .feature-icon{font-size:29px}
 .feature strong{font-size:9px;letter-spacing:0;overflow-wrap:anywhere}
 .feature small{font-size:9px}
}
@media(max-width:420px){
 .welcome-area{width:calc(100% - 24px);margin-top:14px}
 .brand{margin-bottom:clamp(195px,55vw,260px)}
 .signin-card{padding:22px 18px}
 .feature-bar{gap:2px;padding-inline:5px}
 .feature-icon{font-size:25px}
 .feature strong{font-size:8px}
 .feature small{font-size:8px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Font Awesome 6 footer icons */
.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;flex:0 0 38px;font-size:27px;color:#bce6ff;line-height:1}
.feature-icon i{display:block}
@media(max-width:900px){.feature-icon{width:32px;flex-basis:32px;font-size:25px}}
@media(max-width:420px){.feature-icon{width:28px;flex-basis:28px;font-size:22px}}