:root { --peach: #f3a16f; --coral: #ef5360; --ink: #5e3b35; --muted: #9a6254; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "DM Sans", sans-serif; color: var(--ink); }
.auth-page { min-height: 100vh; background: var(--peach); overflow: hidden; }
.auth-shell { min-height: 100vh; max-width: 1440px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; position: relative; isolation: isolate; }
.soft-orb { position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); filter: blur(2px); z-index: -1; }
.orb-one { width: 410px; height: 410px; left: -185px; top: -170px; }.orb-two { width: 270px; height: 270px; right: -90px; bottom: -120px; }
.welcome-panel { position: relative; min-height: 100vh; padding: 42px clamp(28px,5vw,75px); display: flex; align-items: center; justify-content: center; }
.brand { position: absolute; top: 40px; left: clamp(28px,5vw,75px); color: #fff8f2; text-decoration: none; font-size: 19px; font-weight: 700; letter-spacing: .2px; display: flex; gap: 8px; align-items: center; }.brand-mark { width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 8px; font-size: 20px; line-height: 1; }
.side-copy { position: absolute; bottom: 42px; left: clamp(28px,5vw,75px); margin: 0; color: rgba(255,250,245,.74); font-family: "Playfair Display", serif; font-size: 21px; line-height: 1.25; }
.character-wrap { width: 330px; height: 440px; position: relative; animation: arrive 900ms cubic-bezier(.16,.85,.36,1) both; }
.shadow { width: 205px; height: 22px; position: absolute; bottom: 20px; left: 62px; border-radius: 50%; background: rgba(121,59,41,.23); filter: blur(10px); animation: shadow-pulse 3s ease-in-out infinite; }.capsule-character { width: 220px; height: 390px; position: absolute; left: 55px; bottom: 27px; transform-origin: center bottom; animation: mascot-float 3s ease-in-out infinite; }
.capsule-body { position:absolute; width:158px; height:255px; left:31px; top:25px; border-radius:79px 79px 53px 53px; background:#fff9eb; box-shadow: inset 15px -15px 21px rgba(77,103,112,.16), inset -8px 3px 14px rgba(255,255,255,.85), 0 13px 16px rgba(130,57,38,.19); overflow:hidden; z-index:2; }.cap-top { height:113px; background:linear-gradient(105deg,#d8100b 0%,#f92b17 47%,#e30e0b 100%); border-radius:79px 79px 0 0; box-shadow:inset 11px 0 12px rgba(255,255,255,.17), inset -14px 0 18px rgba(133,0,0,.28); }.cap-top:after { content:""; position:absolute; width:36px; height:73px; top:14px; left:87px; background:rgba(255,255,255,.66); border-radius:60% 40% 52% 45%; transform:rotate(-19deg); filter:blur(1px); }.cap-bottom { height:142px; position:relative; border-top:3px solid rgba(123,24,17,.25); }.brow { position:absolute; width:29px; height:11px; top:24px; border-top:5px solid #25211d; border-radius:50%; }.brow-one { left:33px; transform:rotate(-16deg); }.brow-two { right:29px; transform:rotate(15deg); }.eye { position:absolute; }.eye-open { width:23px; height:37px; border-radius:50%; background:#211d1b; left:40px; top:46px; box-shadow:inset 5px 0 #050505; }.eye-open:after { content:""; position:absolute; width:7px; height:11px; border-radius:50%; background:white; top:5px; right:4px; }.eye-wink { width:31px; height:15px; border-top:5px solid #211d1b; border-radius:50%; right:26px; top:59px; transform:rotate(5deg); }.mouth { position:absolute; width:70px; height:38px; background:#251415; border-radius: 8px 8px 45% 45%; left:44px; bottom:16px; box-shadow:inset 0 -7px #d73427; }.mouth:after { content:""; position:absolute; width:51px; height:15px; border-radius:0 0 50% 50%; background:#fff; left:9px; top:3px; }
.capsule-arm { position:absolute; height:27px; width:73px; border-radius:25px; background:linear-gradient(#fa2a1d,#cc0d0a); top:165px; z-index:1; }.capsule-arm:after { content:""; position:absolute; width:47px; height:60px; top:-26px; background:#fff8ec; border-radius:48% 48% 42% 42%; box-shadow:inset -7px -6px 8px rgba(126,106,86,.14); }.capsule-arm .thumb { position:absolute; z-index:2; width:25px; height:46px; top:-58px; background:#fff8ec; border-radius:50% 50% 38% 38%; }.arm-left { left:-26px; transform:rotate(10deg); }.arm-left:after { left:-27px; }.arm-left .thumb { left:-7px; transform:rotate(-11deg); }.arm-right { right:-28px; transform:rotate(-10deg); }.arm-right:after { right:-28px; }.arm-right .thumb { right:-7px; transform:rotate(11deg); }
.capsule-leg { position:absolute; width:26px; height:75px; top:263px; background:linear-gradient(90deg,#bd0d0a,#f72816); border-radius:22px; z-index:1; }.leg-left { left:58px; transform:rotate(8deg); }.leg-right { right:56px; transform:rotate(-8deg); }.shoe { position:absolute; top:324px; width:67px; height:31px; border-radius:50% 50% 12px 12px; background:linear-gradient(#fb2a18 74%,#fff9ec 75%); box-shadow:inset 7px 4px 8px rgba(255,255,255,.18), 0 4px 6px rgba(98,37,31,.18); z-index:2; }.shoe-left { left:37px; transform:rotate(4deg); }.shoe-right { right:36px; transform:rotate(-4deg); }
.form-panel { display: flex; flex-direction: column; justify-content: center; padding: 52px clamp(35px,8vw,128px); position: relative; }.form-content { width: min(100%, 430px); animation: reveal 750ms 300ms both; }.eyebrow { color: rgba(116,61,49,.62); font-size: 10px; letter-spacing: 1.7px; font-weight:700; }.form-content h1 { font: 700 clamp(38px,4vw,52px)/1 "Playfair Display", serif; margin: 12px 0 11px; color:#fff9f4; text-shadow:0 1px rgba(151,74,56,.18); }.intro { font-size:14px; color:rgba(104,57,46,.72); line-height:1.55; margin:0 0 26px; }.field { height: 56px; background:rgba(255,252,249,.92); display:flex; align-items:center; border:1px solid rgba(203,107,78,.18); border-radius:5px; margin-bottom:13px; box-shadow:0 9px 20px rgba(144,68,46,.09); transition:.2s; }.field:focus-within { transform:translateY(-2px); border-color:#e77466; box-shadow:0 9px 23px rgba(144,68,46,.17); }.field-icon { width:53px; text-align:center; color:#d9635d; font-size:17px; font-family:Georgia,serif; }.field input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font:500 14px "DM Sans",sans-serif; padding:0 16px 0 0; }.field input::placeholder { color:#b28579; }
button { border:0; width:100%; height:55px; margin-top:6px; background:var(--coral); color:#fff; font:700 12px "DM Sans",sans-serif; letter-spacing:1px; border-radius:4px; cursor:pointer; box-shadow:0 10px 19px rgba(192,55,62,.22); transition:.2s; }button:hover { transform:translateY(-2px); background:#e94655; box-shadow:0 13px 22px rgba(192,55,62,.28); } button span { margin-left:8px; font-size:17px; vertical-align:-1px; }.switch-copy { text-align:center; font-size:13px; color:rgba(101,55,45,.72); margin:22px 0 0; }.switch-copy a { color:#b83d47; font-weight:700; text-decoration:none; }.footer-note { position:absolute; bottom:30px; margin:0; font-size:10px; color:rgba(102,57,47,.55); }
.form-options { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 10px; font-size:12px; color:rgba(101,55,45,.75); }.form-options label { display:flex; align-items:center; gap:6px; cursor:pointer; }.form-options input { accent-color:var(--coral); }.form-options a { color:#b83d47; font-weight:600; text-decoration:none; }
.login-message { min-height:18px; margin:12px 0 0; color:#8c4039; font-size:12px; text-align:center; }
@keyframes arrive { from { opacity:0; transform:translateX(-80px) } to { opacity:1; transform:translateX(0) } }@keyframes reveal { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }@keyframes mascot-float { 0%,100% { transform:translateY(0) rotate(-2deg) } 50% { transform:translateY(-15px) rotate(2deg) } }@keyframes shadow-pulse { 0%,100% { transform:scale(.92); opacity:.55 } 50% { transform:scale(1.1); opacity:.25 } }
@media (max-width: 760px) { .auth-shell { grid-template-columns:1fr; }.welcome-panel { min-height:230px; padding:26px; justify-content:flex-start; overflow:hidden; }.brand { top:25px; left:26px; }.side-copy { display:none; }.character-wrap { transform:scale(.61); transform-origin:bottom right; position:absolute; right:12px; bottom:-91px; animation:none; }.form-panel { min-height:calc(100vh - 230px); padding:42px 27px 72px; justify-content:flex-start; }.form-content { max-width:none; }.footer-note { left:27px; bottom:24px; }.orb-one { width:250px;height:250px; }.form-content h1 { font-size:42px; } }
@media (max-width: 360px) { .welcome-panel { min-height:185px; }.form-panel { min-height:calc(100vh - 185px); padding-top:32px; }.field, button { height:51px; }.intro { margin-bottom:18px; } }

.auth-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.auth-actions button { margin-top:0; }
.create-account-button { height:55px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(184,61,71,.55); border-radius:4px; color:#a73542; background:rgba(255,249,245,.9); font:700 11px "DM Sans",sans-serif; letter-spacing:.55px; text-decoration:none; transition:.2s; }
.create-account-button:hover { transform:translateY(-2px); color:#fff; background:#b83d47; box-shadow:0 10px 19px rgba(184,61,71,.22); }
@media (max-width:360px) { .auth-actions { grid-template-columns:1fr; }.create-account-button { height:51px; } }