/* Login mengikuti model visual Inventori Ellin Hijab: lampu interaktif + form ungu. */
#loginScreen{
  --login-bg-off:#050505;
  --login-bg-on:#160a24;
  --login-lamp-off:#2c2c2c;
  --login-lamp-on:#b366ff;
  --login-glow:rgba(179,102,255,.35);
  --login-form-bg:#20102f;
  --login-text:#e0e0e0;
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--login-bg-off);
  color:var(--login-text);
  transition:background-color .5s ease;
}
#loginScreen[aria-hidden="true"]{display:none!important}
#loginScreen.on{background:var(--login-bg-on)}
#loginScreen .bg-light{position:absolute;width:600px;height:600px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--login-glow) 0%,transparent 70%);opacity:0;transition:opacity .8s ease;pointer-events:none}
#loginScreen.on .bg-light{opacity:1}
#loginScreen .login-wrapper{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(24px,5vw,50px);width:100%;max-width:780px;padding:clamp(24px,5vw,40px) clamp(20px,6vw,60px);border:1px solid transparent;border-radius:24px;transition:box-shadow .6s ease,background-color .6s ease,border-color .6s ease}
#loginScreen.on .login-wrapper{background:var(--login-form-bg);border-color:rgba(179,102,255,.3);box-shadow:0 0 80px var(--login-glow),inset 0 0 20px rgba(255,255,255,.05)}
#loginScreen .instruction{position:absolute;top:-50px;left:50%;transform:translateX(-50%);color:#666;font-size:14px;letter-spacing:1px;white-space:nowrap;animation:login-bounce 2s infinite}
#loginScreen.on .instruction{display:none}
#loginScreen .lamp-section{position:relative;width:min(200px,42vw);height:min(350px,60vw);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:0 0 auto;transform-origin:bottom center}
#loginScreen .lampshade{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;width:170px;height:130px;background:var(--login-lamp-off);clip-path:polygon(25% 0%,75% 0%,100% 100%,0 100%);transition:background-color .4s ease,box-shadow .4s ease}
#loginScreen.on .lampshade{background:var(--login-lamp-on);box-shadow:0 50px 100px var(--login-glow)}
#loginScreen .lampshade-top{position:absolute;top:-15px;z-index:2;width:60px;height:15px;background:#444;border-radius:10px 10px 0 0;transition:background-color .4s}
#loginScreen.on .lampshade-top{background:#333}
#loginScreen .face{position:absolute;bottom:25px;display:flex;flex-direction:column;align-items:center;gap:8px}
#loginScreen .eyes{display:flex;gap:35px}
#loginScreen .eye{width:18px;height:6px;background:transparent;border-bottom:4px solid #777;border-radius:50%;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}
#loginScreen.on .eye{height:18px;background:#222;border:0;border-radius:50%;transform:translateY(-5px)}
#loginScreen .blush{position:absolute;top:10px;width:12px;height:6px;background:#e0b3ff;border-radius:50%;opacity:0;transition:opacity .4s ease}
#loginScreen .blush.left{left:-20px}
#loginScreen .blush.right{right:-20px}
#loginScreen.on .blush{opacity:.6}
#loginScreen .mouth{width:10px;height:3px;background:#777;border-radius:5px;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}
#loginScreen.on .mouth{width:24px;height:12px;background:transparent;border-bottom:4px solid #222;border-radius:50%;transform:translateY(-2px)}
#loginScreen .base-pole{position:relative;z-index:1;width:14px;height:160px;background:linear-gradient(to right,#333,#555,#333)}
#loginScreen .base-bottom{width:110px;height:25px;background:linear-gradient(to bottom,#555,#222);border-radius:15px 15px 5px 5px;box-shadow:0 10px 15px rgba(0,0,0,.5)}
#loginScreen .cord-container{position:absolute;top:120px;left:110px;z-index:10;display:flex;align-items:flex-start;justify-content:center;width:70px;height:145px;padding:15px;border:0;background:transparent;cursor:pointer;touch-action:manipulation;user-select:none}
#loginScreen .cord{position:relative;width:3px;height:90px;background:#666;transition:height .15s ease-out}
#loginScreen .cord::after{content:"";position:absolute;bottom:-12px;left:-4.5px;width:12px;height:16px;background:#888;border-radius:6px;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:background-color .3s}
#loginScreen .cord-container:hover .cord::after{background:#aaa}
#loginScreen .cord-container:active .cord{height:115px}
#loginScreen .form-section{position:relative;width:min(320px,88vw);min-height:300px;opacity:.1;pointer-events:none;transform:translateY(15px);transition:opacity .5s ease,transform .5s ease;flex:0 0 auto}
#loginScreen.on .form-section{opacity:1;pointer-events:auto;transform:translateY(0)}
#loginScreen .form-box{width:100%;padding:10px 10px 14px}
#loginScreen .form-box h1{margin:0 0 25px;color:#fff;font-size:28px;font-weight:600;text-align:center;transition:color .4s}
#loginScreen.on .form-box h1{color:var(--login-lamp-on)}
#loginScreen .input-group{position:relative;margin-bottom:18px}
#loginScreen .input-group input{width:100%;padding:14px 15px;border:1px solid #444;border-radius:12px;outline:0;background:rgba(0,0,0,.3);color:#fff;font:inherit;font-size:14px;transition:all .3s ease}
#loginScreen .input-group label{position:absolute;left:15px;top:14px;color:#888;font-size:14px;pointer-events:none;transition:all .3s ease}
#loginScreen .input-group input:focus,#loginScreen .input-group input:not(:placeholder-shown){border-color:var(--login-lamp-on);background:rgba(0,0,0,.5);box-shadow:0 0 10px rgba(179,102,255,.2)}
#loginScreen .input-group input:focus+label,#loginScreen .input-group input:not(:placeholder-shown)+label{top:-9px;left:10px;padding:0 5px;border-radius:4px;background:var(--login-form-bg);color:var(--login-lamp-on);font-size:12px}
#loginScreen .submit-btn{width:100%;margin-top:10px;padding:14px;border:0;border-radius:12px;background:#444;color:#888;font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}
#loginScreen.on .submit-btn{background:var(--login-lamp-on);color:var(--login-form-bg);box-shadow:0 5px 15px rgba(179,102,255,.4)}
#loginScreen.on .submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(179,102,255,.5);filter:brightness(1.1)}
#loginScreen .submit-btn:active{transform:scale(.96)}
#loginScreen .auth-message{min-height:18px;margin-top:12px;color:#aaa;font-size:12px;text-align:center}
#loginScreen .auth-message.error{color:#ff6b9e}
#loginScreen .auth-message.success{color:#e0b3ff}
@keyframes login-bounce{0%,20%,50%,80%,100%{transform:translateY(0) translateX(-50%)}40%{transform:translateY(-10px) translateX(-50%)}60%{transform:translateY(-5px) translateX(-50%)}}
@media (max-width:900px) and (min-width:601px){#loginScreen .login-wrapper{padding:32px 36px;gap:36px}#loginScreen .form-box h1{font-size:25px}}
@media (max-width:600px){#loginScreen{align-items:flex-start}#loginScreen .login-wrapper{flex-direction:column;gap:18px;padding:50px 18px 28px}#loginScreen .lamp-section{width:min(170px,48vw);height:min(300px,66vw)}#loginScreen .form-section{width:min(320px,92vw);min-height:270px}#loginScreen .form-box h1{font-size:24px}#loginScreen .instruction{top:12px;font-size:12px}}
@media (max-width:360px){#loginScreen .login-wrapper{gap:14px;padding:46px 12px 22px}#loginScreen .lamp-section{width:min(150px,50vw);height:min(270px,70vw)}#loginScreen .input-group input{padding:12px 13px;font-size:13px}#loginScreen .submit-btn{padding:12px;font-size:15px}}