/* ClientFlow — auth & installer screens */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}
@media(max-width:900px){.auth-wrap{grid-template-columns:1fr}}
.auth-aside{
  position:relative;overflow:hidden;color:#fff;padding:54px 56px;display:flex;flex-direction:column;
  background:linear-gradient(150deg,var(--cf-primary),color-mix(in srgb,var(--cf-accent) 90%,#000 5%));
}
@media(max-width:900px){.auth-aside{display:none}}
.auth-aside::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-160px;bottom:-200px;background:rgba(255,255,255,.12)}
.auth-aside::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;left:-120px;top:-120px;background:rgba(255,255,255,.10)}
.auth-aside .a-brand{display:flex;align-items:center;gap:12px;font-weight:750;font-size:18px;z-index:2}
.auth-aside .a-mark{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-weight:800;font-size:18px;backdrop-filter:blur(6px)}
.auth-aside .a-mark img{width:100%;height:100%;object-fit:contain;border-radius:12px}
.auth-aside h2{font-size:34px;font-weight:780;letter-spacing:-.03em;line-height:1.12;margin-top:auto;z-index:2}
.auth-aside p{opacity:.86;font-size:15px;margin-top:14px;max-width:380px;z-index:2;line-height:1.6}
.auth-feats{display:flex;flex-direction:column;gap:12px;margin-top:30px;z-index:2}
.auth-feats div{display:flex;align-items:center;gap:11px;font-size:14px;opacity:.94}
.auth-feats svg{width:20px;height:20px}

.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--bg)}
.auth-card{width:100%;max-width:400px}
.auth-card .logo-sm{display:none}
@media(max-width:900px){.auth-card .logo-sm{display:flex;align-items:center;gap:10px;margin-bottom:24px;font-weight:750;font-size:18px}}
.auth-card h1{font-size:25px;font-weight:770;letter-spacing:-.03em}
.auth-card .sub{color:var(--text-2);margin:8px 0 28px;font-size:14px}
.auth-card .btn--primary{margin-top:6px;padding:12px}
.auth-foot{text-align:center;margin-top:22px;font-size:13px;color:var(--text-3)}
.auth-foot a{color:var(--cf-primary);font-weight:600}

/* staff/client portal switch */
.auth-switch{display:flex;background:var(--surface-3);border-radius:13px;padding:4px;gap:3px;margin-bottom:24px}
.auth-switch a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border-radius:10px;font-weight:650;font-size:13.5px;color:var(--text-2);transition:.15s}
.auth-switch a svg{width:16px;height:16px}
.auth-switch a.active{background:var(--surface);color:var(--cf-primary);box-shadow:var(--shadow-sm)}
.auth-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cf-primary);background:color-mix(in srgb,var(--cf-primary) 12%,transparent);padding:4px 10px;border-radius:20px;margin-bottom:12px}

/* premium mobile / tablet portrait login */
@media(max-width:900px){
  .auth-main{background:linear-gradient(160deg,var(--cf-primary),color-mix(in srgb,var(--cf-accent) 88%,#000 8%));padding:26px 16px;position:relative;overflow:hidden}
  .auth-main::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.13);top:-130px;right:-110px}
  .auth-main::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.10);bottom:-110px;left:-90px}
  .auth-card{background:var(--surface);border-radius:24px;box-shadow:0 30px 70px rgba(8,10,30,.4);padding:30px 24px;position:relative;z-index:2}
  .auth-card .logo-sm{display:flex;justify-content:center;font-size:18px;margin-bottom:20px}
  .auth-card .logo-sm .brand-mark{width:40px;height:40px}
  .auth-card h1,.auth-card .sub{text-align:center}
}

/* link (forgot password etc.) */
.auth-link{color:var(--cf-primary);font-weight:600;font-size:13px;text-decoration:none}
.auth-link:hover{text-decoration:underline}

/* iOS: blend the status-bar / overscroll bands with the auth background so there
   are no white strips at the top & bottom on iPhone. auth.css only loads on
   auth/installer screens, so this never affects the app shell. */
html:has(.auth-main),body:has(.auth-main){background:var(--cf-primary)}
@media(max-width:900px){
  body:has(.auth-main){background:linear-gradient(160deg,var(--cf-primary),color-mix(in srgb,var(--cf-accent) 88%,#000 8%))}
  .auth-wrap,.auth-main{min-height:100dvh}
  .auth-main{padding-top:max(26px,env(safe-area-inset-top));padding-bottom:max(26px,env(safe-area-inset-bottom))}
}

/* installer stepper */
.wiz{width:100%;max-width:560px}
.wiz-steps{display:flex;align-items:center;gap:6px;margin-bottom:30px}
.wiz-steps .s{flex:1;text-align:center}
.wiz-steps .s .n{width:30px;height:30px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--surface-3);color:var(--text-3);border:2px solid var(--border-2)}
.wiz-steps .s .l{font-size:11px;font-weight:600;color:var(--text-3)}
.wiz-steps .s.active .n{background:var(--cf-primary);border-color:var(--cf-primary);color:#fff}
.wiz-steps .s.done .n{background:var(--ok);border-color:var(--ok);color:#fff}
.wiz-steps .s.active .l,.wiz-steps .s.done .l{color:var(--text)}
.req{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;font-size:13.5px;font-weight:550}
.req .ok{color:var(--ok);font-weight:700}
.req .no{color:var(--danger);font-weight:700}
.wiz .done-mark{width:72px;height:72px;border-radius:50%;background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);display:grid;place-items:center;margin:0 auto 20px}
.wiz .done-mark svg{width:38px;height:38px;stroke-width:2.4}