*,
*::before,
*::after{box-sizing:border-box}

html{min-height:100%;background:#0b2b6a}

body.login-page{
    margin:0;
    min-height:100vh;
    padding:34px 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow-x:hidden;
    overflow-y:auto;
    position:relative;
    isolation:isolate;
    font-family:'Cairo',sans-serif;
    color:#102a67;
    background:
        radial-gradient(circle at 15% 18%,rgba(255,255,255,.18) 0 4%,transparent 4.2%),
        radial-gradient(circle at 84% 22%,rgba(255,255,255,.10) 0 5%,transparent 5.2%),
        linear-gradient(135deg,rgba(9,40,101,.88),rgba(37,99,235,.78)),
        linear-gradient(180deg,#1746a2 0%,#1f6be5 100%);
}

body.login-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(90deg,transparent 0 8%,rgba(255,255,255,.035) 8% 8.4%,transparent 8.4% 100%),
        linear-gradient(0deg,transparent 0 12%,rgba(255,255,255,.025) 12% 12.4%,transparent 12.4% 100%);
    background-size:170px 170px;
}

body.login-page::after{
    content:"";
    position:fixed;
    left:50%;
    bottom:-230px;
    width:min(1100px,90vw);
    height:620px;
    transform:translateX(-50%);
    z-index:-1;
    border:2px solid rgba(255,255,255,.12);
    border-radius:50% 50% 0 0;
}

.login-shape{
    position:fixed;
    z-index:-1;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    animation:loginFloat 8s ease-in-out infinite;
}
.login-shape:nth-of-type(1){width:130px;height:130px;top:17%;left:8%}
.login-shape:nth-of-type(2){width:58px;height:58px;bottom:17%;left:17%;animation-delay:1.5s}
.login-shape:nth-of-type(3){width:150px;height:150px;top:25%;right:8%;animation-delay:3s}
.login-shape:nth-of-type(4){width:70px;height:70px;bottom:12%;right:15%;animation-delay:4.5s}

.login-wrapper{width:100%;max-width:610px;position:relative;z-index:2}

.login-card{
    position:relative;
    padding:42px 46px 34px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.75);
    border-radius:30px;
    background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,246,255,.96));
    box-shadow:0 38px 90px rgba(4,25,73,.34),0 1px 0 rgba(255,255,255,.95) inset;
    animation:loginCardEnter .65s cubic-bezier(.22,1,.36,1) both;
}

.login-logo{
    width:132px;height:132px;margin:0 auto 18px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    filter:drop-shadow(0 12px 22px rgba(15,45,115,.18));
}
.login-logo img{width:100%;height:100%;display:block;object-fit:contain}

.login-title{
    margin:0;text-align:center;color:#123681;font-size:40px;line-height:1.2;font-weight:800
}

.login-subtitle{
    margin:12px 0 26px;text-align:center;color:#203b78;font-size:16px;line-height:1.9
}
.login-subtitle::after{
    content:"";display:block;width:100%;height:1px;margin:24px auto 0;
    background:linear-gradient(90deg,transparent,#b9c8e8 20%,#b9c8e8 80%,transparent)
}

.login-alert{
    display:flex;align-items:center;gap:11px;margin-bottom:20px;padding:14px 16px;
    border-radius:14px;font-size:13px;font-weight:700;
    transition:opacity .3s ease,transform .3s ease
}
.login-alert-error{color:#991b1b;border:1px solid #fecaca;background:#fff1f2}

.login-form{width:100%}
.login-group{margin-bottom:20px}
.login-label{display:block;margin-bottom:8px;color:#193777;font-size:14px;font-weight:700}
.login-input-wrapper{position:relative}

.login-input{
    width:100%;height:56px;padding:0 54px;border:1.5px solid #aebddd;border-radius:14px;
    outline:none;background:#fff;color:#172554;font:600 15px 'Cairo',sans-serif;
    transition:border-color .2s ease,box-shadow .2s ease
}
.login-input::placeholder{color:#94a3b8;font-weight:400}
.login-input:hover{border-color:#7f98cc}
.login-input:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.login-input.is-invalid{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.10)}

.login-input-icon{
    position:absolute;top:50%;right:18px;left:auto;transform:translateY(-50%);
    color:#21489f;font-size:17px;pointer-events:none;z-index:2
}

.password-toggle{
    position:absolute;top:50%;left:11px;right:auto;transform:translateY(-50%);
    width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;
    border:0;border-radius:10px;background:transparent;color:#2455bd;font-size:17px;
    cursor:pointer;z-index:3;transition:background .2s ease,color .2s ease
}
.password-toggle:hover{background:#eaf1ff;color:#123681}

.login-options{display:flex;align-items:center;justify-content:flex-start;margin:2px 0 24px}
.login-check{display:inline-flex;align-items:center;gap:9px;color:#263d70;font-size:14px;font-weight:700;cursor:pointer}
.login-check input{width:18px;height:18px;margin:0;accent-color:#2563eb;cursor:pointer}

.login-btn{
    width:100%;height:58px;padding:0 22px;display:inline-flex;align-items:center;
    justify-content:center;gap:11px;border:0;border-radius:15px;
    background:linear-gradient(135deg,#123b9a 0%,#1565e8 55%,#2c82ff 100%);
    color:#fff;font:800 18px 'Cairo',sans-serif;cursor:pointer;
    box-shadow:0 16px 30px rgba(37,99,235,.27);
    transition:transform .2s ease,box-shadow .2s ease
}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 20px 38px rgba(37,99,235,.34)}
.login-btn:disabled,.login-btn.loading{opacity:.78;cursor:not-allowed;transform:none}

.login-footer{
    margin-top:28px;padding-top:22px;display:flex;align-items:center;justify-content:center;
    gap:18px;border-top:1px solid #d6e0f3;color:#68769a;text-align:center;font-size:12px
}
.login-powered::before{
    content:"";display:inline-block;width:1px;height:18px;margin:0 18px 0 0;
    vertical-align:middle;background:#c5d1e8
}
.login-copyright{
    margin:18px 0 0;text-align:center;color:rgba(255,255,255,.72);
    font-size:12px;text-shadow:0 1px 3px rgba(0,0,0,.18)
}
.login-field-error{margin-top:7px;color:#b91c1c;font-size:12px;font-weight:700}

@keyframes loginCardEnter{
    from{opacity:0;transform:translateY(28px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes loginFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-14px)}
}

@media(max-width:768px){
    body.login-page{padding:24px 14px;align-items:flex-start}
    .login-card{padding:34px 28px 28px;border-radius:24px}
    .login-logo{width:112px;height:112px}
    .login-title{font-size:33px}
}
@media(max-width:480px){
    body.login-page{padding:16px 10px}
    .login-card{padding:28px 18px 24px;border-radius:20px}
    .login-logo{width:96px;height:96px;margin-bottom:12px}
    .login-title{font-size:28px}
    .login-subtitle{font-size:14px;margin-bottom:22px}
    .login-input{height:52px;font-size:14px}
    .login-btn{height:54px;font-size:16px}
    .login-footer{flex-direction:column;gap:5px}
    .login-powered::before{display:none}
    .login-shape{display:none}
}


/* ===== FINAL COMPACT OVERRIDES ===== */
html,body{min-height:100%;}
body.login-page{
    min-height:100vh;
    padding:12px 16px;
    overflow:hidden;
    background:
        linear-gradient(rgba(20,78,180,.62),rgba(12,58,150,.74)),
        url("https://images.unsplash.com/photo-1738240879684-803c994915ac?auto=format&fit=crop&fm=jpg&q=88&w=2400") center/cover no-repeat fixed;
}
body.login-page::after{
    top:50%;bottom:auto;width:min(920px,82vw);height:min(920px,82vw);
    transform:translate(-50%,-50%);border-radius:50%;
}
.login-wrapper{max-width:500px;}
.login-card{padding:18px 34px 16px;border-radius:24px;}
.login-logo{width:148px;height:84px;margin:0 auto 2px;border-radius:0;filter:none;}
.login-title{font-size:30px;}
.login-subtitle{margin:5px 0 12px;font-size:12px;line-height:1.7;}
.login-subtitle::after{margin-top:11px;}
.login-group{margin-bottom:10px;}
.login-label{margin-bottom:5px;font-size:12px;}
.login-input{height:43px;padding:0 13px;font-size:13px;}
.login-page .login-input{
    background-color:#fff!important;
    color:#0f172a!important;
    -webkit-text-fill-color:#0f172a!important;
    caret-color:#0f172a;
    color-scheme:light;
}
.login-page .login-input::placeholder{color:#64748b!important;-webkit-text-fill-color:#64748b!important;opacity:1;}
.login-page .login-input:-webkit-autofill,
.login-page .login-input:-webkit-autofill:hover,
.login-page .login-input:-webkit-autofill:focus{
    -webkit-text-fill-color:#0f172a!important;
    -webkit-box-shadow:0 0 0 1000px #fff inset!important;
    box-shadow:0 0 0 1000px #fff inset!important;
}
.login-input-icon{display:none!important;}
#password{padding-left:46px;}
.password-toggle{left:6px;width:32px;height:32px;font-size:15px;}
.login-options{margin:0 0 10px;}
.login-check{font-size:12px;}
.login-check input{width:16px;height:16px;}
.login-btn{height:44px;font-size:15px;border-radius:11px;}
.login-footer{margin-top:11px;padding-top:9px;font-size:10px;}
.login-copyright{margin-top:5px;font-size:10px;}
@media(max-height:720px){
  .login-card{padding:10px 28px 9px;}
  .login-logo{width:125px;height:66px;}
  .login-title{font-size:25px;}
  .login-subtitle{font-size:10px;margin-bottom:7px;}
  .login-group{margin-bottom:7px;}
  .login-input{height:38px;}
  .login-btn{height:39px;}
  .login-footer{margin-top:7px;padding-top:6px;}
}