@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{--login-ink:#171717;--login-muted:#69645f;--login-red:#e63946;--login-red-dark:#c92e3b;--login-cream:#fffaf5;--login-line:#eee8e1;--login-soft:#fff0ed}
*{box-sizing:border-box}
body.login-page{margin:0;min-height:100vh;background:#fff;color:var(--login-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.login-layout{min-height:100vh;display:grid;grid-template-columns:minmax(360px,1fr) minmax(480px,1fr)}
.login-story{position:relative;overflow:hidden;min-height:100vh;padding:38px clamp(38px,7vw,104px);background:var(--login-cream);display:flex;flex-direction:column;justify-content:space-between}
.login-story:before,.login-story:after{content:"";position:absolute;border:1px solid #eaded2;border-radius:50%;pointer-events:none}
.login-story:before{width:560px;height:560px;left:-300px;bottom:-240px;box-shadow:0 0 0 42px #fffaf580,0 0 0 84px #fffaf550}
.login-story:after{width:220px;height:220px;right:-140px;top:90px}
.brand{position:relative;z-index:1;display:inline-flex;align-items:center;gap:11px;width:max-content;color:var(--login-ink);font-size:14px;font-weight:850;letter-spacing:.04em;text-decoration:none}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--login-red);color:#fff;display:grid;place-items:center;font-size:15px;letter-spacing:-.06em;box-shadow:0 5px 13px #e6394633}
.brand small{display:block;margin-top:-3px;color:#8a8580;font-size:9px;font-weight:750;letter-spacing:.18em}
.story-copy{position:relative;z-index:1;max-width:440px;margin:56px 0 25px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid #f2e6dc;border-radius:99px;background:#fff;color:#70655d;font-size:10px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:#36a877;box-shadow:0 0 0 4px #36a87720}
.story-copy h1{margin:22px 0 14px;font-size:clamp(38px,4.7vw,60px);font-weight:800;line-height:1.04;letter-spacing:-.065em}
.story-copy h1 span{color:var(--login-red)}
.story-copy p{max-width:405px;margin:0;color:var(--login-muted);font-size:15px;line-height:1.8}
.story-card{position:relative;z-index:1;width:min(100%,420px);padding:18px;background:#fff;border:1px solid #f0e9e2;border-radius:17px;box-shadow:0 22px 54px #36241912;transform:rotate(-1deg)}
.story-card-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid #f1ece7}
.story-card-head strong,.story-card-foot strong{display:block;font-size:11px}
.story-card-head small,.story-card-foot small{display:block;margin-top:3px;color:#969089;font-size:9px}
.preview-label{padding:6px 8px;border-radius:20px;background:#fff3e5;color:#a35a25;font-size:8px;font-weight:800;letter-spacing:.08em}
.sample-ticket{display:grid;grid-template-columns:repeat(9,1fr);overflow:hidden;margin-top:14px;border:1px solid #eee7e0;border-radius:9px}
.sample-ticket span{height:34px;display:grid;place-items:center;border-right:1px solid #eee7e0;border-bottom:1px solid #eee7e0;font-size:10px;font-weight:750}
.sample-ticket span:nth-child(9n){border-right:0}.sample-ticket span:nth-last-child(-n+9){border-bottom:0}
.sample-ticket span.empty{background:#fcfaf8}.sample-ticket span.called{background:var(--login-red);color:#fff}
.story-card-foot{display:flex;align-items:center;gap:10px;margin-top:12px}
.number-ball{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--login-red);color:#fff;font-size:12px;font-weight:850;box-shadow:inset 0 -3px 0 #a91f2a30}
.story-footer{position:relative;z-index:1;margin:22px 0 0;color:#8a837d;font-size:10px}
.login-main{min-height:100vh;padding:42px clamp(32px,7vw,100px) 22px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.login-panel{width:min(100%,390px);margin:auto 0}
.mobile-brand{display:none;margin-bottom:38px}
.back-link{display:inline-flex;gap:8px;margin-bottom:39px;color:#77716b;font-size:12px;font-weight:650;text-decoration:none}
.back-link:hover,.login-bottom a:hover{color:var(--login-red)}
.form-kicker{display:block;margin-bottom:10px;color:var(--login-red);font-size:10px;font-weight:850;letter-spacing:.15em}
.login-panel h2{margin:0;font-size:32px;line-height:1.2;letter-spacing:-.05em}
.form-intro{margin:10px 0 28px;color:var(--login-muted);font-size:13px;line-height:1.7}
.field-group{margin-bottom:18px}
.field-group label{display:block;margin-bottom:8px;font-size:11px;font-weight:750}
.field-group input{width:100%;height:48px;padding:0 14px;border:1px solid #e8e3dd;border-radius:9px;background:#fff;color:var(--login-ink);font:inherit;font-size:13px;transition:border-color .15s,box-shadow .15s}
.field-group input::placeholder{color:#aaa39d}
.field-group input:focus{outline:0;border-color:var(--login-red);box-shadow:0 0 0 3px #e6394617}
.sign-in-button{width:100%;height:48px;margin-top:5px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:10px;background:var(--login-red);color:#fff;font:inherit;font-size:13px;font-weight:750;cursor:pointer;box-shadow:0 7px 16px #e6394626;transition:transform .15s,background .15s,opacity .15s}
.sign-in-button:hover{background:var(--login-red-dark);transform:translateY(-1px)}
.sign-in-button:disabled{opacity:.65;cursor:wait;transform:none}
.login-alert{margin:0 0 18px;padding:12px 14px;border:1px solid #f3c6c8;border-radius:9px;background:#fff2f2;color:#a52831;font-size:12px;line-height:1.6}
.is-hidden{display:none}
.login-help{margin:17px 0 0;color:#79736d;text-align:center;font-size:11px}
.login-divider{display:flex;align-items:center;gap:13px;margin:34px 0 13px;color:#a09a94}
.login-divider span{height:1px;flex:1;background:var(--login-line)}
.login-divider i{font-size:8px;font-style:normal;font-weight:800;letter-spacing:.13em}
.login-note{margin:0;color:#8c867f;text-align:center;font-size:10px}
.login-bottom{width:min(100%,390px);display:flex;justify-content:space-between;gap:12px;color:#98918a;font-size:10px}
.login-bottom a{color:inherit;font-weight:700;text-decoration:none}
:focus-visible{outline:3px solid #386fce;outline-offset:3px}
@media(max-width:850px){.login-layout{grid-template-columns:minmax(300px,.85fr) minmax(420px,1.15fr)}.login-story{padding:30px 34px}.login-main{padding:34px 45px 20px}.story-copy h1{font-size:43px}.story-card{padding:14px}.sample-ticket span{height:30px}}
@media(max-width:650px){.login-layout{display:block}.login-story{display:none}.login-main{min-height:100svh;padding:27px 24px 20px}.login-panel{width:min(100%,410px)}.mobile-brand{display:inline-flex;margin-bottom:44px}.back-link{margin-bottom:29px}.login-panel h2{font-size:29px}.login-bottom{width:min(100%,410px);margin-top:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}