@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--login-blue:#405bc5;--login-navy:#111d40;--login-ink:#142433;--login-muted:#71808c;--login-line:#e2e9ee}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:var(--login-ink)}
body.shop-login{min-height:100vh;background:#f4f7fa}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(420px,.8fr);background:#fff}
.login-visual{position:relative;min-height:100vh;overflow:hidden;background:var(--login-navy)}
.login-slider,.login-visual-fallback{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(135deg,#111d40,#405bc5)}
.login-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.login-slide.is-active{opacity:1}
.login-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,26,41,.04),rgba(4,26,41,.38));pointer-events:none}
.login-visual-caption{position:absolute;z-index:2;left:42px;bottom:34px;display:flex;align-items:center;gap:11px;color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.caption-mark{width:26px;height:3px;border-radius:5px;background:#fff}
.login-panel{display:flex;align-items:center;justify-content:center;padding:clamp(28px,6vw,84px);background:#fff}
.login-card{width:min(100%,430px);padding:0}
.login-brand{display:inline-flex;align-items:center;margin-bottom:48px}
.login-brand img{display:block;width:min(210px,70%);height:auto;object-fit:contain}
.login-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--login-blue);margin-bottom:12px}
.login-card h1{font-size:clamp(32px,3vw,42px);letter-spacing:-.045em;line-height:1.1;margin:0 0 12px;color:var(--login-ink)}
.login-intro{font-size:14px;line-height:1.7;color:var(--login-muted);margin:0 0 30px;max-width:360px}
.login-form label{display:block;font-size:12px;font-weight:700;color:#425463;margin:0 0 8px}
.login-form input{display:block;width:100%;height:52px;border:1px solid var(--login-line);border-radius:10px;background:#f8fafb;padding:0 15px;font:500 14px Inter,Arial,sans-serif;color:var(--login-ink);outline:none;margin:0 0 19px;transition:border-color .2s,box-shadow .2s,background .2s}
.login-form input:focus{border-color:#8799e8;background:#fff;box-shadow:0 0 0 4px rgba(64,91,197,.11)}
.login-form button{width:100%;height:54px;border:0;border-radius:10px;background:var(--login-blue);color:#fff;font:700 14px Inter,Arial,sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;cursor:pointer;box-shadow:0 8px 18px rgba(64,91,197,.18);transition:background .2s,transform .2s}
.login-form button:hover{background:#30479f;transform:translateY(-1px)}
.login-forgot{display:block;text-align:center;margin-top:21px;color:var(--login-blue);font-size:13px;font-weight:600;text-decoration:none}
.login-forgot:hover{text-decoration:underline}
.login-error{padding:12px 14px;border:1px solid #f1caca;background:#fff3f3;color:#a73333;border-radius:9px;margin:0 0 18px;font-size:13px;line-height:1.5}
.login-footnote{border-top:1px solid #eef2f5;margin-top:38px;padding-top:18px;color:#9aa6af;font-size:11px;text-align:center}
@media(max-width:850px){.login-shell{grid-template-columns:1fr}.login-visual{min-height:32vh;height:32vh}.login-panel{min-height:68vh;padding:34px 22px 42px}.login-brand{margin-bottom:30px}.login-card{max-width:460px}.login-visual-caption{left:22px;bottom:18px}}
@media(max-width:480px){.login-visual{min-height:26vh;height:26vh}.login-panel{min-height:74vh;padding:26px 20px 34px}.login-brand{margin-bottom:26px}.login-brand img{width:175px}.login-card h1{font-size:31px}.login-intro{font-size:13px;margin-bottom:24px}.login-footnote{margin-top:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}