:root { --pet-orange:#f26b21; --pet-orange-dark:#dc5712; --pet-ink:#20292b; --pet-muted:#718084; --pet-line:#e3e9e7; --pet-cream:#fffaf5; --pet-green:#176e61; }
*,*::before,*::after { box-sizing:border-box; }
html,body { min-height:100%; margin:0; }
body { color:var(--pet-ink); background:#fff; font-family:"Montserrat","Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.login-visual { position:relative; display:flex; flex-direction:column; min-height:100vh; overflow:hidden; padding:42px clamp(30px,5vw,76px) 48px; background:var(--pet-cream); }
.login-visual::before,.login-visual::after { position:absolute; content:""; border-radius:50%; pointer-events:none; }
.login-visual::before { width:260px; height:260px; top:-155px; right:-105px; background:#ffe3c9; }
.login-visual::after { width:170px; height:170px; bottom:-82px; left:-64px; background:#e7f2ed; }
.brand { position:relative; z-index:1; display:inline-flex; align-items:center; gap:13px; width:max-content; text-decoration:none; }
.brand-mark { width:52px; height:52px; border-radius:16px; object-fit:cover; box-shadow:0 8px 18px rgba(242,107,33,.18); }
.brand-name { color:var(--pet-ink); font-size:1.35rem; font-weight:800; letter-spacing:-.035em; }
.visual-content { position:relative; z-index:1; display:flex; flex:1; flex-direction:column; justify-content:center; width:min(100%,510px); margin:0 auto; padding:35px 0 16px; }
.pet-image-wrap { position:relative; width:min(100%,450px); margin:0 auto 36px; }
.pet-image-wrap::before { position:absolute; content:""; width:92%; height:92%; right:-17px; bottom:-18px; border:2px solid #f3c69e; border-radius:46% 54% 44% 56% / 54% 42% 58% 46%; transform:rotate(6deg); }
.pet-image { position:relative; display:block; width:100%; aspect-ratio:1.16; object-fit:cover; border-radius:48% 52% 40% 60% / 48% 42% 58% 52%; box-shadow:0 24px 48px rgba(56,45,35,.13); }
.visual-copy { max-width:425px; margin:0 auto; text-align:center; }
.eyebrow { margin:0 0 12px; color:var(--pet-orange-dark); font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.visual-copy h2 { margin:0 0 12px; color:var(--pet-ink); font-size:clamp(1.65rem,2.3vw,2.25rem); line-height:1.18; letter-spacing:-.045em; }
.visual-copy p { margin:0; color:var(--pet-muted); font-size:.92rem; line-height:1.7; }
.visual-footer { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px; color:#9aa6a3; font-size:.74rem; }
.paw { color:var(--pet-orange); font-size:1rem; }
.vet-brand { position:relative; z-index:1; display:flex; align-items:center; gap:10px; width:max-content; margin:0 auto 18px; padding:7px 12px 7px 7px; border:1px solid #e8eee9; border-radius:14px; color:#718084; background:rgba(255,255,255,.62); font-size:.7rem; font-weight:700; letter-spacing:.01em; }
.vet-brand img { width:30px; height:30px; object-fit:contain; border-radius:9px; }
.login-panel { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:44px clamp(28px,7vw,108px); background:#fff; }
.auth-card { width:min(100%,428px); }
.auth-nav { display:flex; align-items:center; gap:25px; margin-bottom:70px; color:#9ba6a5; font-size:.86rem; font-weight:700; }
.auth-nav a { position:relative; padding:6px 0 11px; text-decoration:none; }
.auth-nav a:hover,.auth-nav a:focus { color:var(--pet-orange-dark); }
.auth-nav .active { color:var(--pet-ink); }
.auth-nav .active::after { position:absolute; content:""; right:0; bottom:0; left:0; height:3px; border-radius:99px; background:var(--pet-orange); }
.auth-intro { margin-bottom:34px; }
.auth-intro h1 { margin:0 0 11px; color:var(--pet-ink); font-size:clamp(2rem,3vw,2.6rem); line-height:1.1; letter-spacing:-.055em; }
.auth-intro p { max-width:360px; margin:0; color:var(--pet-muted); font-size:.9rem; line-height:1.65; }
.alert-success,.alert-error { margin:0 0 22px; padding:12px 14px; border-radius:12px; font-size:.82rem; line-height:1.45; }
.alert-success { border:1px solid #b9dfd1; color:#176e61; background:#f1fbf7; }
.alert-error { border:1px solid #f1c4bd; color:#bf3d32; background:#fff6f4; }
.form-field { margin-bottom:19px; }
.form-field label { display:block; margin:0 0 8px; color:#4c5d60; font-size:.78rem; font-weight:700; }
.input-wrap { position:relative; }
.form-control { display:block; width:100%; height:53px; padding:0 16px; border:1px solid var(--pet-line); border-radius:13px; outline:0; color:var(--pet-ink); background:#fff; font:inherit; font-size:.9rem; transition:border-color .2s,box-shadow .2s,background .2s; }
.form-control::placeholder { color:#aeb8b7; }
.form-control:focus { border-color:var(--pet-orange); box-shadow:0 0 0 4px rgba(242,107,33,.12); }
.password-input { padding-right:52px; }
.toggle-password { position:absolute; top:50%; right:8px; display:inline-grid; width:37px; height:37px; padding:0; place-items:center; border:0; border-radius:10px; color:#84918f; background:transparent; cursor:pointer; transform:translateY(-50%); }
.toggle-password:hover,.toggle-password:focus { color:var(--pet-orange-dark); background:#fff4ec; outline:0; }
.toggle-password svg { width:19px; height:19px; fill:currentColor; }
.validation-message,.validation-summary-errors { display:block; margin-top:7px; color:#bf3d32; font-size:.76rem; line-height:1.4; }
.validation-summary-errors ul { margin:0; padding-left:17px; }
.login-submit { display:flex; align-items:center; justify-content:center; width:100%; height:54px; border:0; border-radius:13px; color:#fff; background:var(--pet-orange); box-shadow:0 12px 22px rgba(242,107,33,.21); font:inherit; font-size:.88rem; font-weight:800; cursor:pointer; transition:background .2s,transform .2s,box-shadow .2s; }
.login-submit:hover,.login-submit:focus { background:var(--pet-orange-dark); box-shadow:0 14px 25px rgba(242,107,33,.27); outline:3px solid rgba(242,107,33,.18); outline-offset:2px; }
.login-submit:disabled { cursor:not-allowed; opacity:.78; }
.login-btn-spinner { display:none; width:15px; height:15px; margin-right:9px; border:2px solid rgba(255,255,255,.42); border-top-color:#fff; border-radius:50%; animation:login-spin .8s linear infinite; }
.login-submit.is-loading .login-btn-spinner { display:inline-block; }
@keyframes login-spin { to { transform:rotate(360deg); } }
.auth-back { display:inline-block; margin-top:25px; color:var(--pet-orange-dark); font-size:.76rem; font-weight:700; text-decoration:none; }
.auth-back:hover,.auth-back:focus { color:var(--pet-green); text-decoration:underline; }
.legal-notice { margin-top:25px; color:#8a9694; font-size:.68rem; line-height:1.65; text-align:center; }
.legal-notice a { color:var(--pet-orange-dark); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:900px) { .login-visual { padding-inline:34px; } .login-panel { padding-inline:42px; } .visual-content { padding-top:10px; } .pet-image-wrap { max-width:330px; margin-bottom:25px; } .visual-copy h2 { font-size:1.55rem; } .auth-nav { margin-bottom:52px; } }
@media (max-width:680px) { .login-page { display:block; } .login-visual { min-height:auto; padding:24px 24px 30px; } .visual-content { padding:34px 0 10px; } .pet-image-wrap { max-width:255px; margin-bottom:21px; } .visual-copy h2 { font-size:1.5rem; } .visual-copy p { font-size:.84rem; } .vet-brand { margin-bottom:0; } .visual-footer { display:none; } .login-panel { min-height:auto; padding:40px 24px 55px; } .auth-card { max-width:450px; } .auth-nav { margin-bottom:42px; } }
@media (max-width:400px) { .login-visual { padding-inline:18px; } .login-panel { padding-inline:18px; } }