
/* Mockup V3: auth-only frontend; no PHP/JS handlers changed */
:root{--xyz-blue:#3158ff;--xyz-ink:#101c39}
body.auth-screen,body.auth-seo-override{margin:0!important;background:#eff3ff!important;font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif!important;color:var(--xyz-ink)!important}
.xyz-site-header,.xyz-site-footer{font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif!important;box-sizing:border-box!important}
.xyz-site-header *,.xyz-site-footer *{box-sizing:border-box!important}
.xyz-site-header{position:relative;z-index:30;background:#fff;border-bottom:1px solid #e6eaf4;box-shadow:0 2px 15px #12245a09}
.xyz-nav{max-width:1180px;margin:auto;min-height:72px;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.xyz-logo{display:flex;align-items:center;gap:10px;color:#14213b!important;text-decoration:none!important;font-size:17px;font-weight:800;white-space:nowrap}.xyz-logo small{display:block;font-size:10px;color:#7787a4;font-weight:500}.xyz-mark{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#3d6bff,#6c24e8);color:#fff;font-size:25px}
.xyz-links,.xyz-actions{display:flex;align-items:center;gap:24px}.xyz-links a,.xyz-actions a{font-size:13px;font-weight:650;text-decoration:none!important;color:#243151!important}.xyz-actions{gap:10px}.xyz-actions a{padding:11px 19px;border:1px solid #4569ff;border-radius:12px;color:#3158ff!important}.xyz-actions a.xyz-primary{background:#3158ff;color:#fff!important}.xyz-menu-toggle{display:none}
.xyz-site-footer{background:#0d1b40!important;color:#e5ecff!important;padding:21px 20px!important}.xyz-site-footer>div{max-width:1180px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:12px}.xyz-site-footer nav{display:flex;gap:18px;flex-wrap:wrap}.xyz-site-footer a{color:#e5ecff!important;text-decoration:none!important}
/* The old auth styles used display:grid on the entire main and multiple backgrounds. Reset explicitly. */
body.auth-screen main.auth-page{box-sizing:border-box!important;display:flex!important;justify-content:center!important;align-items:center!important;min-height:calc(100vh - 130px)!important;padding:50px 20px!important;background:linear-gradient(125deg,#f0f4ff,#e7edff)!important}
body.auth-screen .auth-frame{box-sizing:border-box!important;display:grid!important;grid-template-columns:39% minmax(0,61%)!important;width:min(1030px,100%)!important;max-width:1030px!important;min-height:540px!important;overflow:hidden!important;border-radius:20px!important;background:#fff!important;box-shadow:0 18px 65px #273b831b!important}
body.auth-screen .auth-banner{box-sizing:border-box!important;grid-column:1!important;min-height:540px!important;padding:42px 35px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;text-align:left!important;position:relative!important;background:linear-gradient(145deg,#365cff,#5531e7 55%,#710bd0)!important;color:#fff!important}
body.auth-screen .auth-banner:before{content:'';position:absolute;inset:0;opacity:.12;pointer-events:none;background:repeating-linear-gradient(30deg,transparent 0 28px,#fff 29px,transparent 30px 57px),repeating-linear-gradient(150deg,transparent 0 28px,#fff 29px,transparent 30px 57px)}
body.auth-screen .auth-banner>*{position:relative;z-index:1}
body.auth-screen .auth-brand{display:flex!important;gap:12px!important;align-items:center!important;color:#fff!important;text-decoration:none!important}body.auth-screen .auth-brand img{width:42px!important;height:42px!important;border-radius:10px!important;object-fit:cover!important;background:white}body.auth-screen .auth-brand strong{color:#fff!important;font-size:17px!important}body.auth-screen .auth-brand small{display:block;color:#dfe5ff!important;font-size:10px!important}
body.auth-screen .auth-welcome{margin:40px 0 20px!important}body.auth-screen .auth-welcome h1{font-size:31px!important;line-height:1.2!important;font-weight:800!important;color:white!important;margin:12px 0!important}body.auth-screen .auth-welcome p{font-size:13px!important;line-height:1.65!important;color:#e9e8ff!important}
.xyz-feature-list{display:grid;gap:13px;margin-top:20px}.xyz-feature-list>div{display:flex;align-items:center;gap:14px;border:1px solid #ffffff35;border-radius:12px;background:#ffffff17;padding:13px}.xyz-feature-list>div>span{font-size:22px}.xyz-feature-list p{margin:0!important;color:#fff!important}.xyz-feature-list b{display:block;font-size:13px}.xyz-feature-list small{display:block;font-size:11px;color:#e7e6ff;margin-top:3px}
body.auth-screen .auth-content{box-sizing:border-box!important;grid-column:2!important;min-width:0!important;padding:40px clamp(26px,4.5vw,58px)!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background:#fff!important}body.auth-screen .auth-heading h2{font-size:26px!important;font-weight:800!important;color:#14213c!important}body.auth-screen .auth-heading p{font-size:13px!important;color:#71809d!important}
body.auth-screen .auth-field label{font-size:12px!important;color:#283856!important;font-weight:700!important}body.auth-screen .auth-input-wrap,body.auth-screen .auth-form .input{box-sizing:border-box!important;min-height:44px!important;max-width:100%!important;border-radius:10px!important;background:#f7f9fd!important;border:1px solid #e0e7f5!important;box-shadow:none!important}body.auth-screen .auth-input-wrap .input{background:transparent!important;border:0!important}body.auth-screen .auth-submit{min-height:47px!important;border-radius:10px!important;background:#3158ff!important;color:#fff!important;font-weight:750!important;border:0!important}body.auth-screen .auth-secondary-action{min-height:43px!important;border:1px solid #3158ff!important;border-radius:10px!important;background:#fff!important;color:#3158ff!important;display:flex!important;align-items:center;justify-content:center;text-decoration:none!important;font-weight:700!important}body.auth-screen .auth-form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}body.auth-screen .auth-field-full{grid-column:span 2!important}body.auth-screen .auth-safety-note{display:none!important}
/* Forgot password uses legacy multi-step forms; retain its OTP and reset JavaScript */
body.auth-seo-override .auth-shell{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:calc(100vh - 130px)!important;padding:45px 20px!important;background:linear-gradient(125deg,#f0f4ff,#e7edff)!important}
body.auth-seo-override .auth-shell .auth-card{box-sizing:border-box!important;display:grid!important;grid-template-columns:39% minmax(0,61%)!important;width:min(1030px,100%)!important;max-width:1030px!important;min-height:540px!important;margin:0!important;border-radius:20px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 18px 65px #273b831b!important}
body.auth-seo-override .auth-shell .visual{grid-column:1!important;box-sizing:border-box!important;min-height:540px!important;padding:40px 32px!important;background:linear-gradient(145deg,#365cff,#5531e7 55%,#710bd0)!important;color:white!important}
body.auth-seo-override .auth-shell .form-side{grid-column:2!important;box-sizing:border-box!important;min-height:540px!important;padding:40px clamp(26px,4.5vw,58px)!important;background:#fff!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
body.auth-seo-override .auth-shell .panels{border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important}body.auth-seo-override .auth-shell .tabs{display:none!important}body.auth-seo-override .auth-shell .heading h2{color:#15213b!important;font-size:27px!important}body.auth-seo-override .auth-shell .input-wrap{border:1px solid #dfe7f5!important;background:#f7f9fd!important;border-radius:10px!important}body.auth-seo-override .auth-shell .btn-gradient{background:#3158ff!important;border-radius:10px!important}
@media(max-width:760px){.xyz-nav{flex-wrap:wrap}.xyz-menu-toggle{display:block;margin-left:auto;border:1px solid #d9e1fa;background:#fff;border-radius:8px;padding:8px 12px;color:#17264c}.xyz-links{display:none;order:5;width:100%;flex-direction:column;align-items:stretch;gap:0}.xyz-links.xyz-open{display:flex}.xyz-links a{padding:12px 4px}.xyz-actions{gap:6px}.xyz-actions a{padding:9px 12px;font-size:11px}.xyz-logo{font-size:14px}.xyz-logo small{font-size:9px}body.auth-screen main.auth-page,body.auth-seo-override .auth-shell{padding:20px 12px!important}body.auth-screen .auth-frame,body.auth-seo-override .auth-shell .auth-card{grid-template-columns:minmax(0,1fr)!important}body.auth-screen .auth-banner,body.auth-seo-override .auth-shell .visual{grid-column:1!important;min-height:auto!important;padding:26px 24px!important}body.auth-screen .auth-content,body.auth-seo-override .auth-shell .form-side{grid-column:1!important;min-height:auto!important;padding:28px 22px!important}.xyz-feature-list{grid-template-columns:1fr}.xyz-feature-list>div{padding:9px}.xyz-feature-list>div:nth-child(n+3){display:none}body.auth-screen .auth-welcome{margin:18px 0!important}body.auth-screen .auth-welcome h1{font-size:25px!important}}
@media(max-width:430px){body.auth-screen .auth-form-grid{grid-template-columns:1fr!important}body.auth-screen .auth-field-full{grid-column:1!important}.xyz-logo small{display:none}.xyz-actions{width:100%;justify-content:flex-end}}
