/* =====================================================================
   Socialzen Login / Register - professional, mobile-first layout.
   Loaded AFTER the inline page styles so it refines them. Follows the
   admin Theme Control through --sz-rgb-* variables.
   ===================================================================== */
body.sz-auth{
  --a-primary:rgb(var(--sz-rgb-primary,79 70 229));
  --a-secondary:rgb(var(--sz-rgb-secondary,139 92 246));
  --a-soft:rgb(var(--sz-rgb-primary,79 70 229) / .13);
  --a-card:rgb(var(--sz-rgb-card,18 20 28));
  --a-text:rgb(var(--sz-rgb-text,255 255 255));
  --a-line:rgb(var(--sz-rgb-text,255 255 255) / .13);
  --a-muted:rgb(var(--sz-rgb-text,255 255 255) / .62);
  --a-ease:cubic-bezier(.2,.8,.2,1);
  background-color:rgb(var(--sz-rgb-bg,10 11 16))!important;color:var(--a-text);-webkit-tap-highlight-color:transparent}

/* header follows the theme on these pages too */
body.sz-auth nav.site-nav{background-color:rgb(var(--sz-rgb-card,18 20 28) / .9)!important;border-color:var(--a-line)!important;box-shadow:0 1px 0 var(--a-line)}
body.sz-auth nav.site-nav [class*="text-slate-"],body.sz-auth nav.site-nav .nav-item-btn{color:var(--a-text)}
body.sz-auth nav.site-nav .nav-item-btn:hover,body.sz-auth nav.site-nav .nav-item-btn.active-nav{background:var(--a-soft)}
body.sz-auth nav.site-nav .bg-slate-50,body.sz-auth nav.site-nav .bg-slate-100{background-color:var(--a-soft)!important}
body.sz-auth nav.site-nav .border-slate-200{border-color:var(--a-line)!important}
body.sz-auth nav.site-nav .text-xl{color:var(--a-text)}

/* ---------- page canvas ---------- */
body.sz-auth .auth-page,body.sz-auth .register-page{
  position:relative;display:grid!important;grid-template-columns:minmax(0,1fr);align-items:start!important;justify-items:center;gap:0;
  padding:0 0 130px!important;min-height:calc(100svh - 80px);overflow:hidden;
  background:
    radial-gradient(700px 420px at 12% -8%,rgb(var(--sz-rgb-primary,79 70 229) / .20),transparent 70%),
    radial-gradient(600px 400px at 100% 0,rgb(var(--sz-rgb-secondary,139 92 246) / .16),transparent 70%)}

/* ---------- brand panel ---------- */
.auth-brand{width:100%;color:#fff;position:relative;
  background:linear-gradient(135deg,var(--a-primary),var(--a-secondary));padding:26px 20px 64px}
.auth-brand:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(260px 200px at 90% 10%,rgba(255,255,255,.28),transparent 70%),radial-gradient(220px 180px at 0 100%,rgba(0,0,0,.22),transparent 70%)}
.auth-brand-inner{position:relative;max-width:430px;margin:0 auto}
.auth-brand-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:18px}
.auth-brand-logo img{max-height:34px;width:auto;filter:brightness(0) invert(1)}
.auth-brand-mark{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.auth-brand-mark svg{width:19px;height:19px}
.auth-brand-title{font-size:21px;line-height:1.2;font-weight:900;letter-spacing:-.02em;margin:0 0 6px}
.auth-brand-sub{font-size:13px;line-height:1.5;opacity:.88;margin:0}
.auth-brand-list{list-style:none;margin:18px 0 0;padding:0;display:none}
.auth-brand-list li{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.auth-brand-ico{flex:0 0 40px;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.auth-brand-ico svg{width:19px;height:19px}
.auth-brand-list b{display:block;font-size:14px;font-weight:800}
.auth-brand-list small{display:block;font-size:12px;opacity:.82;margin-top:2px;line-height:1.4}

/* ---------- card ---------- */
body.sz-auth .auth-card,body.sz-auth .register-card{
  max-width:460px!important;width:calc(100% - 28px)!important;margin:-40px auto 0!important;padding:26px 20px!important;border-radius:26px!important;
  border:1px solid var(--a-line)!important;background:var(--a-card)!important;position:relative;z-index:2;
  box-shadow:0 24px 60px rgba(0,0,0,.28),0 2px 0 rgba(255,255,255,.04) inset!important}
body.sz-auth .auth-card:before,body.sz-auth .register-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:26px 26px 0 0;
  background:linear-gradient(90deg,var(--a-primary),var(--a-secondary));opacity:1;inset:0 0 auto 0;width:auto;transform:none;filter:none}
body.sz-auth .register-card:after,body.sz-auth .auth-blob{display:none!important}

/* headings */
body.sz-auth .auth-header,body.sz-auth .register-header{margin-bottom:20px!important}
body.sz-auth .auth-title,body.sz-auth .register-title{font-size:24px!important;font-weight:900!important;letter-spacing:-.025em;line-height:1.2}
body.sz-auth .auth-subtitle,body.sz-auth .register-subtitle{font-size:13px!important;line-height:1.5;margin-top:6px}
body.sz-auth .auth-icon,body.sz-auth .register-icon{width:52px!important;height:52px!important;border-radius:16px!important;color:var(--a-primary)!important;
  background:var(--a-soft)!important;border:1px solid rgb(var(--sz-rgb-primary,79 70 229) / .25)!important;box-shadow:0 10px 26px rgb(var(--sz-rgb-primary,79 70 229) / .16)!important}

/* fields */
body.sz-auth .field,body.sz-auth .register-field{margin-bottom:14px}
body.sz-auth .field-label,body.sz-auth label{font-size:12px!important;font-weight:800!important;letter-spacing:.01em;opacity:.85}
body.sz-auth .auth-input,body.sz-auth .register-input,body.sz-auth .register-password-input{
  height:52px!important;min-height:52px;font-size:16px!important;border-radius:15px!important;border:1.5px solid var(--a-line)!important;
  background:rgb(var(--sz-rgb-text,255 255 255) / .04)!important;color:var(--a-text)!important;-webkit-text-fill-color:var(--a-text);
  transition:border-color .2s,box-shadow .2s,background-color .2s}
body.sz-auth .auth-input::placeholder,body.sz-auth .register-input::placeholder{color:var(--a-muted)!important;-webkit-text-fill-color:var(--a-muted);opacity:.75}
body.sz-auth .auth-input:hover,body.sz-auth .register-input:hover{border-color:rgb(var(--sz-rgb-primary,79 70 229) / .4)!important}
body.sz-auth .auth-input:focus,body.sz-auth .register-input:focus{outline:none;border-color:var(--a-primary)!important;
  background:rgb(var(--sz-rgb-primary,79 70 229) / .06)!important;box-shadow:0 0 0 4px var(--a-soft)!important}
body.sz-auth .input-icon,body.sz-auth .register-field-icon{color:var(--a-muted)!important;opacity:.9}
body.sz-auth .input-wrap:focus-within .input-icon,body.sz-auth .register-field:focus-within .register-field-icon{color:var(--a-primary)!important;opacity:1}
body.sz-auth .password-toggle,body.sz-auth .register-eye{color:var(--a-muted)!important;border-radius:12px;min-width:40px;min-height:40px}
body.sz-auth .password-toggle:hover,body.sz-auth .register-eye:hover{color:var(--a-primary)!important;background:var(--a-soft)!important}
body.sz-auth .forgot-link{font-size:12px;font-weight:800;color:var(--theme-link,var(--a-primary))!important}
body.sz-auth .forgot-link:hover{text-decoration:underline}
body.sz-auth .register-name-grid{gap:12px}
@media(max-width:379px){body.sz-auth .register-name-grid{grid-template-columns:1fr!important}}

/* buttons */
body.sz-auth .auth-btn,body.sz-auth .register-submit{
  height:54px!important;min-height:54px;border-radius:16px!important;font-size:15px!important;font-weight:800!important;letter-spacing:-.005em;border:0!important;
  color:var(--sz-on-primary,#fff)!important;background:linear-gradient(135deg,var(--a-primary),var(--a-secondary))!important;
  box-shadow:0 14px 30px rgb(var(--sz-rgb-primary,79 70 229) / .38)!important;transition:transform .15s,filter .2s,box-shadow .2s}
body.sz-auth .auth-btn:hover,body.sz-auth .register-submit:hover{filter:brightness(1.07);transform:translateY(-1px)}
body.sz-auth .auth-btn:active,body.sz-auth .register-submit:active{transform:scale(.985)}
body.sz-auth .auth-btn:disabled,body.sz-auth .register-submit:disabled{opacity:.7;filter:grayscale(.2)}
body.sz-auth .google-btn,body.sz-auth .register-google,body.sz-auth .secondary-btn{
  height:52px!important;min-height:52px;border-radius:15px!important;font-weight:800!important;font-size:14px!important;border:1.5px solid var(--a-line)!important;
  background:rgb(var(--sz-rgb-text,255 255 255) / .04)!important;color:var(--a-text)!important;transition:border-color .2s,background-color .2s,transform .15s}
body.sz-auth .google-btn:hover,body.sz-auth .register-google:hover,body.sz-auth .secondary-btn:hover{border-color:var(--a-primary)!important;background:var(--a-soft)!important}
body.sz-auth .divider span,body.sz-auth .register-divider span{background:var(--a-card)!important;color:var(--a-muted)!important;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
body.sz-auth .divider:before,body.sz-auth .divider:after,body.sz-auth .register-divider:before,body.sz-auth .register-divider:after{background:var(--a-line)!important}
body.sz-auth .register-link,body.sz-auth .register-link a,body.sz-auth .register-login a,body.sz-auth .register-text a{color:var(--theme-link,var(--a-primary))!important;font-weight:800}
body.sz-auth .register-text,body.sz-auth .register-login{font-size:13px;color:var(--a-muted)}

/* alerts */
body.sz-auth .auth-alert,body.sz-auth .register-error{border-radius:14px!important;font-size:13px;font-weight:600;line-height:1.45}

/* 2-step / OTP */
body.sz-auth .otp-input{height:58px!important;font-size:24px!important;font-weight:800;letter-spacing:.5em;text-align:center;border-radius:15px!important;
  border:1.5px solid var(--a-line)!important;background:rgb(var(--sz-rgb-text,255 255 255) / .04)!important;color:var(--a-text)!important;-webkit-text-fill-color:var(--a-text)}
body.sz-auth .otp-input:focus{border-color:var(--a-primary)!important;box-shadow:0 0 0 4px var(--a-soft)!important;outline:none}
body.sz-auth .destination-box{border-radius:14px!important;border:1px solid var(--a-line)!important;background:var(--a-soft)!important}

/* ---------- tablet ---------- */
@media(min-width:640px){
  .auth-brand{padding:34px 28px 78px}
  .auth-brand-title{font-size:26px}
  body.sz-auth .auth-card,body.sz-auth .register-card{padding:34px 32px!important}
}

/* ---------- desktop: split screen ---------- */
@media(min-width:1024px){
  body.sz-auth .auth-page,body.sz-auth .register-page{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)!important;align-items:center!important;justify-items:stretch;
    padding:0!important;min-height:calc(100vh - 80px)}
  .auth-brand{height:100%;min-height:calc(100vh - 80px);display:flex;align-items:center;padding:48px 56px}
  .auth-brand-inner{max-width:480px;margin:0 0 0 auto}
  .auth-brand-title{font-size:36px}
  .auth-brand-sub{font-size:15px}
  .auth-brand-list{display:block;margin-top:34px}
  .auth-brand-logo img{max-height:42px}
  body.sz-auth .auth-card,body.sz-auth .register-card{margin:36px auto!important;width:100%!important;max-width:480px!important}
  body.sz-auth .auth-card:before,body.sz-auth .register-card:before{border-radius:26px 26px 0 0}
}
/* phones: slim brand banner (logo + title only), card overlaps it */
@media(max-width:1023px){
  .auth-brand-sub{display:none}
  body.sz-auth .register-page{padding-bottom:140px!important}
}
@media(prefers-reduced-motion:reduce){body.sz-auth *{transition:none!important;animation:none!important}}

/* header Login / Register buttons keep their own solid look (the generic slate overrides above must not touch them) */
body.sz-auth nav.site-nav a.hdr-login-btn,body.sz-auth nav.site-nav a.hdr-cta{
  background:linear-gradient(135deg,var(--a-primary),var(--a-secondary))!important;color:var(--sz-on-primary,#fff)!important;
  border:0!important;font-weight:800}
body.sz-auth nav.site-nav a.hdr-login-btn:hover,body.sz-auth nav.site-nav a.hdr-cta:hover{filter:brightness(1.08)}
@media(min-width:1024px){
  body.sz-auth nav.site-nav a.hdr-login-btn{background:transparent!important;color:var(--a-text)!important;box-shadow:none!important}
  body.sz-auth nav.site-nav a.hdr-login-btn:hover{background:var(--a-soft)!important}
}