:root { --ink:#1d281f; --cream:#f5f0e7; --paper:#fffdf8; --lime:#ddea82; --line:#dedbd2; --muted:#737b75; --serif:"Instrument Serif",Georgia,serif; --sans:"DM Sans",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; font-family:var(--sans); color:var(--ink); background:var(--cream); }
button,input { font:inherit; }
button:focus-visible,input:focus-visible { outline:3px solid rgba(190,211,92,.45); outline-offset:2px; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(420px,46%) minmax(480px,54%); }
.login-story { position:relative; min-height:100vh; display:flex; flex-direction:column; padding:42px clamp(30px,5vw,72px); color:#f5f0e7; background:radial-gradient(circle at 80% 30%,rgba(221,234,130,.08),transparent 25%),linear-gradient(150deg,#172219,#253329); overflow:hidden; }
.login-story::before { content:""; position:absolute; width:430px; height:430px; right:-250px; bottom:-210px; border:1px solid rgba(221,234,130,.14); border-radius:50%; box-shadow:0 0 0 34px rgba(221,234,130,.025),0 0 0 68px rgba(221,234,130,.02); }
.login-brand { display:flex; align-items:center; gap:10px; color:inherit; font-size:23px; font-weight:800; letter-spacing:-.055em; text-decoration:none; }
.login-brand small { margin:4px 0 0 -5px; color:#8f9b92; font-size:7px; letter-spacing:.18em; }
.brand-petal { width:31px; height:31px; display:grid; place-items:center; color:var(--ink); background:var(--lime); border-radius:50% 50% 50% 10%; font-size:12px; transform:rotate(-12deg); }
.story-copy { position:relative; z-index:2; max-width:570px; margin:auto 0 18px; }
.story-kicker,.panel-kicker { color:var(--lime); font-size:8px; font-weight:800; letter-spacing:.22em; }
.story-copy h1 { margin:16px 0 22px; font-family:var(--serif); font-size:clamp(49px,5.8vw,83px); font-weight:400; line-height:.91; letter-spacing:-.035em; }
.story-copy h1 em { color:var(--lime); font-weight:400; }
.story-copy p { max-width:430px; margin:0; color:#a8b2aa; font-size:11px; line-height:1.8; }
.story-art { position:relative; z-index:1; height:255px; margin:30px 0 40px; }
.story-card { position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:8px; box-shadow:0 24px 50px rgba(0,0,0,.25); }
.story-card.back { left:10%; top:28px; width:175px; height:205px; color:#253329; background:#ddea82; transform:rotate(-8deg); }
.story-card.back::before { content:""; position:absolute; inset:14px; border:1px solid rgba(31,42,33,.25); }
.story-card.back span { position:absolute; bottom:27px; font-family:var(--serif); font-size:14px; }
.story-card.front { left:37%; top:0; width:185px; height:230px; color:#f4dfc7; background:linear-gradient(150deg,#a44f37,#d28159); transform:rotate(5deg); }
.story-card.front::before,.story-card.front::after { content:"◆ ◇ ◆ ◇ ◆"; position:absolute; left:0; right:0; color:rgba(91,39,26,.5); font-size:6px; letter-spacing:9px; text-align:center; }.story-card.front::before{top:16px}.story-card.front::after{bottom:16px}
.story-card.front small { font-size:6px; letter-spacing:.2em; }.story-card.front strong { margin:18px 0 12px; font-family:var(--serif); font-size:47px; font-weight:400; }.story-card.front strong i{font-size:18px;font-weight:400}.story-card.front span{font-size:6px;letter-spacing:.18em}
.story-ring { position:absolute; right:8%; top:16px; width:190px; height:190px; border:1px solid rgba(221,234,130,.22); border-radius:50%; box-shadow:inset 0 0 0 24px rgba(221,234,130,.015),0 0 0 16px rgba(221,234,130,.015); }
.story-foot { position:relative; z-index:2; display:flex; align-items:center; gap:10px; color:#7e8b81; font-size:8px; letter-spacing:.08em; }.story-foot span{color:var(--lime)}
.login-panel { min-height:100vh; display:grid; place-items:center; padding:50px 28px; background:var(--paper); }
.form-wrap { width:min(100%,430px); }
.panel-kicker { color:#7d8952; }
.form-wrap h2 { margin:13px 0 10px; font-family:var(--serif); font-size:43px; font-weight:400; line-height:.98; letter-spacing:-.025em; }
.form-wrap>p { margin:0; color:var(--muted); font-size:10px; line-height:1.65; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:30px 0 22px; padding:4px; background:#eeebe4; border-radius:10px; }
.auth-tabs.single { grid-template-columns:1fr; }
.auth-tabs button { height:38px; color:#777e78; background:transparent; border:0; border-radius:8px; font-size:9px; font-weight:800; cursor:pointer; }.auth-tabs button.active{color:var(--ink);background:#fff;box-shadow:0 2px 9px rgba(31,40,33,.08)}
#authForm { display:grid; gap:14px; }
.auth-field { display:grid; gap:7px; color:#59615b; font-size:9px; font-weight:700; }
.auth-field input { width:100%; height:47px; padding:0 13px; color:var(--ink); background:#faf8f3; border:1px solid #d9d7cf; border-radius:9px; outline:0; font-size:11px; transition:150ms ease; }.auth-field input:focus{background:#fff;border-color:#6f7c71;box-shadow:0 0 0 3px rgba(111,124,113,.1)}
.password-wrap { display:grid; grid-template-columns:1fr auto; }.password-wrap input{border-radius:9px 0 0 9px}.password-wrap button{padding:0 13px;color:#616a63;background:#eceae4;border:1px solid #d9d7cf;border-left:0;border-radius:0 9px 9px 0;font-size:8px;font-weight:800;cursor:pointer}
.auth-error { min-height:15px!important; color:#a74136!important; font-size:9px!important; }
.submit-auth { height:48px; display:flex; align-items:center; justify-content:center; gap:13px; color:#f7f5ee; background:var(--ink); border:0; border-radius:10px; font-size:10px; font-weight:800; cursor:pointer; transition:160ms ease; }.submit-auth:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(29,40,31,.2)}.submit-auth:disabled{opacity:.6;cursor:wait}.submit-auth span{font-size:17px;font-weight:400}
.demo-account { margin-top:23px; padding:14px 16px; color:#52604c; background:#f0f3dd; border:1px solid #dce4af; border-radius:11px; }.demo-account>span{font-size:7px;font-weight:800;letter-spacing:.15em}.demo-account p{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:7px 0 5px;color:#33402e;font-size:9px}.demo-account p i{color:#9ba47d}.demo-account small{color:#78816e;font-size:7px;line-height:1.5}.demo-account code{font-size:7px}
.login-note { display:flex;align-items:center;justify-content:center;gap:7px;margin-top:23px!important;text-align:center;font-size:8px!important}.login-note span{color:#78a65e;font-size:9px}
@media(max-width:850px){.login-shell{grid-template-columns:1fr}.login-story{min-height:390px;padding:28px 24px}.story-copy{margin:75px 0 10px}.story-copy h1{font-size:48px}.story-art{position:absolute;right:-70px;bottom:0;width:430px;opacity:.28}.story-foot{display:none}.login-panel{min-height:auto;padding:55px 20px 70px}}
@media(max-width:480px){.login-story{min-height:330px}.story-copy{margin-top:65px}.story-copy h1{font-size:41px}.story-copy p{max-width:280px}.story-art{display:none}.login-panel{padding-top:45px}.form-wrap h2{font-size:37px}}
 [hidden] {
  display: none !important;
}