/* Login - mobile compact */
:root{
    --bg:#f3f5fa;
    --primary:#ff5a36;
    --primary2:#ff8f5c;
    --primary-deep:#e94824;
    --muted:#6b7280;
    --ease-out:cubic-bezier(.22,1,.36,1);
    --fs-xs:10px;
    --fs-sm:11px;
    --fs-base:12px;
    --fs-md:13px;
    --fs-lg:14px;
    --fs-xl:15px;
    --btn-fs:12px;
    --btn-pad:9px 12px;
    --input-fs:13px;
    --input-pad:9px 11px;
}
*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:none}
*::-webkit-scrollbar{display:none}
html{overflow-x:hidden;touch-action:manipulation;font-size:var(--fs-base)}
html.splash-active,html.splash-active body{overflow:hidden}
body{
    background:var(--bg);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:var(--fs-base);
    max-width:500px;margin:0 auto;min-height:100vh;overflow-x:hidden;
    touch-action:manipulation;
}
#appSplash{
    position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(145deg,var(--primary-deep) 0%,var(--primary) 45%,var(--primary2) 100%);
    max-width:500px;margin:0 auto;left:0;right:0;
    transition:opacity .45s ease,visibility .45s ease;
}
#appSplash.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash-ring{
    position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.12) 0%,transparent 55%);
    animation:splashRingPulse 2.5s ease-in-out infinite;
}
.splash{text-align:center;color:#fff;padding:20px;width:100%;position:relative;z-index:1}
.splash-logo{
    width:72px;height:72px;margin:0 auto 22px;border-radius:20px;
    background:rgba(255,255,255,.18);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;font-size:32px;
    box-shadow:0 12px 40px rgba(0,0,0,.2);animation:splashLogoPulse 1.6s ease-in-out infinite;
}
.splash h1{font-size:var(--fs-xl);font-weight:700;margin-bottom:6px;opacity:0;animation:splashFadeUp .6s ease .2s forwards}
.splash-tagline{font-size:var(--fs-sm);opacity:0;margin-bottom:28px;animation:splashFadeUp .6s ease .35s forwards}
.splash-loader{
    width:160px;height:3px;margin:0 auto 16px;background:rgba(255,255,255,.2);
    border-radius:4px;overflow:hidden;opacity:0;animation:splashFadeUp .5s ease .5s forwards;
}
.splash-loader-bar{height:100%;width:35%;background:#fff;border-radius:4px;animation:splashLoaderRun 1.4s ease-in-out infinite}
.splash-dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
.splash-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);animation:splashDotBounce 1.2s ease-in-out infinite}
.splash-dots span:nth-child(2){animation-delay:.15s}
.splash-dots span:nth-child(3){animation-delay:.3s}
#loginApp{opacity:0;transform:translateY(10px);transition:opacity .4s ease .1s,transform .4s ease .1s}
#loginApp.is-visible{opacity:1;transform:translateY(0)}
@keyframes splashLogoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes splashFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes splashLoaderRun{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@keyframes splashDotBounce{0%,80%,100%{transform:scale(.85);opacity:.5}40%{transform:scale(1.15);opacity:1}}
@keyframes splashRingPulse{0%,100%{opacity:.6}50%{opacity:1}}
.login-topbar{
    background:linear-gradient(145deg,var(--primary-deep),var(--primary) 50%,var(--primary2));
    padding:44px 20px 92px;border-radius:0 0 32px 32px;color:#fff;text-align:center;
    box-shadow:0 12px 40px rgba(255,90,54,.25);
}
.login-topbar .logo{
    width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:26px;
}
.login-topbar h1{font-size:var(--fs-lg);font-weight:700;margin-bottom:4px}
.login-topbar p{font-size:var(--fs-sm);opacity:.9}
.login-card-wrap{margin:-52px 16px 20px;position:relative;z-index:2}
.login-card{
    background:#fff;border-radius:20px;padding:18px;
    box-shadow:0 4px 16px rgba(15,23,42,.06),0 24px 48px rgba(255,90,54,.1);
    border:1px solid rgba(15,23,42,.05);
    animation:premiumScaleIn .5s var(--ease-out) both;
}
@keyframes premiumScaleIn{
    from{opacity:0;transform:scale(.96) translateY(8px)}
    to{opacity:1;transform:scale(1) translateY(0)}
}
.login-card .alert-danger{
    background:#ffebee;color:#c62828;border-radius:10px;padding:8px 10px;font-size:var(--fs-sm);margin-bottom:10px;
}
.form-label{display:block;font-size:var(--fs-sm);font-weight:600;color:#555;margin-bottom:4px}
.input-group{display:flex;align-items:stretch;margin-bottom:10px}
.input-group-text{
    display:flex;align-items:center;padding:0 11px;background:#f5f5f5;border:none;
    border-radius:11px 0 0 11px;color:#888;font-size:12px;
}
.input-group .form-control{
    flex:1;border:none;background:#f5f5f5;border-radius:0 11px 11px 0;padding:var(--input-pad);font-size:var(--input-fs);outline:none;
}
.input-group .form-control:focus{background:#fff0ec}
.input-group-password .form-control{border-radius:0!important}
.input-group-password .input-group-text:last-child{
    border-radius:0 11px 11px 0;cursor:pointer;background:#f5f5f5;border:none;font-size:12px;
}
.form-check{display:flex;align-items:center;gap:6px;margin-bottom:12px;font-size:var(--fs-sm);color:var(--muted)}
.form-check-input{width:15px;height:15px;accent-color:var(--primary)}
.btn-login{
    border:none;border-radius:14px;padding:12px 14px;
    background:linear-gradient(135deg,var(--primary-deep),var(--primary),var(--primary2));
    color:#fff;font-weight:700;width:100%;min-height:42px;
    display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;
    box-shadow:0 8px 24px rgba(255,90,54,.3);
    transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out);
}
.btn-login:active{transform:scale(.98)}
.btn-login:disabled{opacity:.85;cursor:not-allowed}
.btn-login .btn-login-spinner{display:none;font-size:var(--fs-sm)}
.btn-login.is-loading .btn-login-label{display:none}
.btn-login.is-loading .btn-login-spinner{display:inline-flex;align-items:center;gap:6px}
.spinner{border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.login-footer{text-align:center;font-size:var(--fs-sm);color:var(--muted);padding:0 16px 20px;line-height:1.45}
.login-demo{font-size:var(--fs-xs);color:#999;text-align:center;margin-top:10px;line-height:1.45}