/* Vendor Sales Engine — sign-in, sign-up, password reset (ui/vse-auth.css)
   Replaces the three stacked auth overrides (vse-auth-options, -compact, -premium-copy).
   Load last. Uses tokens from vse.css and vse-system.css only. */

body.state-auth .auth{display:grid;grid-template-columns:minmax(420px,44%) minmax(0,1fr);min-height:100dvh;background:var(--surface)}

/* ---------- brand panel ---------- */
.auth-brand{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  padding:36px clamp(32px,4vw,64px);overflow:hidden;color:#C9D3E1;
  background:radial-gradient(120% 70% at 0% 100%,rgba(43,179,179,.16),transparent 60%),#0B1630}
:root[data-theme="dark"] .auth-brand{background:radial-gradient(120% 70% at 0% 100%,rgba(43,179,179,.12),transparent 60%),#070E1C;border-right:1px solid var(--border)}
.auth-brand::before,.auth-brand::after{display:none}
.auth-brand-top{display:flex;flex-direction:column;gap:8px}
.auth-brand-top img{width:164px;height:auto}
.auth-brand-top .product-line{font-size:13px;font-weight:600;letter-spacing:.02em;color:#8FA0B8;margin:0}
.vse-auth-brand-story{max-width:520px}
.vse-auth-brand-story h2{font-family:var(--font-display);font-size:clamp(28px,2.5vw,38px);line-height:1.14;letter-spacing:-.03em;color:#fff;font-weight:700;margin:0;max-width:20ch}
.vse-auth-brand-story h2 span{display:block;color:#7FD6D6}
.vse-auth-brand-story p{font-size:16px;line-height:1.55;color:#AEBBCD;margin:16px 0 0;max-width:44ch}
.auth-benefits{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;max-width:none}
.auth-benefits li{display:flex;gap:12px;margin:0;font-size:14px;line-height:1.45;color:#AEBBCD}
.auth-benefits li svg{width:20px;height:20px;flex:0 0 20px;margin-top:1px;color:#4CC3C3}
.auth-benefits li strong{display:block;color:#fff;font-weight:600;font-size:14px;margin-bottom:2px}
.auth-preview{max-width:420px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);border-radius:14px;padding:14px 16px}
.auth-preview-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:600;color:#fff;margin-bottom:6px}
.auth-preview-head em{font-style:normal;font-weight:500;color:#7D8DA6}
.auth-preview-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.06);font-size:13px;color:#AEBBCD}
.auth-preview-row b{font-family:var(--font-display);font-variant-numeric:tabular-nums;color:#fff;font-weight:700;min-width:76px}
.auth-preview-row span{flex:1}
.auth-preview-row i{width:8px;height:8px;border-radius:50%}
.auth-preview-row .tone-warn{background:#F2B65A}.auth-preview-row .tone-accent{background:#4CC3C3}.auth-preview-row .tone-ok{background:#4ACB95}

/* ---------- form side ---------- */
.auth-main{position:relative;display:flex;align-items:center;justify-content:center;padding:56px 32px;background:var(--surface)}
.auth-top{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:8px}
body.state-auth .auth-card{width:100%;max-width:400px;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}
.auth-card h1{font-family:var(--font-display);font-size:28px;line-height:1.2;letter-spacing:-.025em;margin:0}
.auth-sub{color:var(--text-2);font-size:15px;margin:6px 0 24px}
.auth-mobile-brand{display:none}
#noaccess .icon-circle,#freeaccess .badge{margin-bottom:16px}
#noaccess h1,#freeaccess h1{margin-bottom:10px}
#noaccess p,#freeaccess p{color:var(--text-2)}
#noaccess .btn-row,#freeaccess .btn-row{margin-top:20px}
.auth-card [data-notice-slot]:empty{display:none}
.auth-card [data-notice-slot] .notice{margin:0 0 18px;padding:11px 13px;font-size:14px;line-height:1.45;border-radius:10px}
.auth-card #notice:empty{display:none!important}

.vse-auth-alternatives{margin:0}
.vse-auth-option{width:100%;min-height:46px;gap:10px;font-size:15px;font-weight:600;border-radius:10px;
  background:var(--surface);color:var(--text);border:1px solid var(--border-strong);box-shadow:var(--shadow-xs)}
.vse-auth-option:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)}
.vse-auth-option:disabled:hover{background:var(--surface)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text-3);font-size:13px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}

#login form,#recovery form,#login #freeSignupPanel form{display:block;gap:0}
#login #freeSignupPanel form button[type=submit]{margin-top:20px}
.auth-card form label{font-size:14px;font-weight:550;color:var(--text);margin:0 0 6px}
.auth-card form input:not([type=checkbox]){min-height:46px;font-size:16px;padding:10px 14px;border-radius:10px}
.auth-card form > input + label,.auth-card form > .pw-field + label,.auth-card form > .field-hint + label,.auth-card form > input + .label-row{margin-top:16px}
.auth-card input[aria-invalid="true"]{border-color:var(--danger)}
.auth-card input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 22%,transparent)}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 6px}
.label-row label{margin:0!important}
.pw-field{position:relative}
#login form input,#recovery form input,#login .pw-field,#recovery .pw-field,.pw-toggle{margin-top:0!important;margin-bottom:0!important}
.pw-field input{padding-right:68px!important}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:34px;padding:0 10px;border-radius:8px;
  background:transparent;border-color:transparent;color:var(--text-2);font-size:13px;font-weight:600;box-shadow:none}
.pw-toggle:hover{background:var(--surface-3);border-color:transparent;color:var(--text)}
.text-btn{display:inline;min-height:0;padding:0;border:0;background:none;box-shadow:none;color:var(--accent-text);font:inherit;font-weight:600;cursor:pointer}
.text-btn:hover{background:none;text-decoration:underline;color:var(--accent-text)}
.label-row .text-btn{font-size:13px}
.field-hint{font-size:13px;color:var(--text-3);margin:6px 0 0}
.auth-card form button[type=submit]{width:100%;min-height:46px;margin-top:20px;font-size:15px;font-weight:600;border-radius:10px}
.auth-legal{font-size:12.5px;color:var(--text-3);text-align:center;margin:14px 0 0}
.auth-switch-line{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--divider);text-align:center;font-size:14px;color:var(--text-2)}
#login[data-mode="login"] .auth-switch-line:not([data-for~="login"]),
#login[data-mode="signup"] .auth-switch-line:not([data-for~="signup"]),
#login[data-mode="reset"] .auth-switch-line:not([data-for~="reset"]){display:none}
#login[data-mode="reset"] .vse-auth-alternatives,#login[data-mode="reset"] .auth-divider{display:none}
.unified-auth-switch{display:none}

/* ---------- laptop heights ---------- */
@media (min-width:1024px){body.state-auth .auth{height:100dvh;overflow:hidden}.auth-main{overflow-y:auto}}
@media (min-width:1024px) and (max-height:800px){
  .auth-brand{padding-block:28px;gap:20px}
  .vse-auth-brand-story h2{font-size:clamp(26px,2.2vw,32px)}
  .vse-auth-brand-story p{margin-top:12px;font-size:15px}
  .auth-benefits{margin-top:20px;gap:14px 20px}
  .auth-preview{padding:10px 14px}.auth-preview-row{padding:7px 0}
}
@media (min-width:1024px) and (max-height:680px){.auth-preview{display:none}}
@media (min-width:1024px) and (max-width:1200px){.auth-benefits{grid-template-columns:1fr}.auth-preview{display:none}}

/* ---------- tablet & phone ---------- */
@media (max-width:1023px){
  body.state-auth .auth{grid-template-columns:minmax(0,1fr);height:auto;overflow:visible}
  .auth-brand{display:none}
  .auth-main{align-items:flex-start;min-height:100dvh;padding:72px 20px 40px;background:var(--surface)}
  .auth-mobile-brand{display:flex;flex-direction:column;gap:4px;margin:0 0 28px}
  .auth-mobile-brand img{width:150px;height:auto}
  .auth-mobile-brand span{font-size:13px;font-weight:600;color:var(--text-3)}
  body.state-auth .auth-card{margin-top:min(6vh,48px)}
}
@media (max-width:420px){
  .auth-main{padding:64px 16px 32px}
  .auth-card h1{font-size:25px}
  .auth-sub{margin-bottom:20px}
  body.state-auth .auth-card{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.auth *{transition:none!important}}