/* SchickOn Corporate Design V1 — source: approved Phase-1 homepage CSS.
   Web browser login / recovery / activation / MFA presentation ONLY.
   Do not style authenticated app-shell; do not load in Capacitor native runtime. */
:root{
  --so-auth-ink:#10232A;
  --so-auth-dark:#09152f;
  --so-auth-copy:#112a3b;
  --so-auth-muted:#667995;
  --so-auth-line:#e4ebee;
  --so-auth-green:#75D63B;
  --so-auth-action:#2bba26;
  --so-auth-action-hover:#219e20;
  --so-auth-bg:#f6f8f4;
  --so-auth-soft:#eaf4e6;
  --so-auth-white:#fff;
  --so-auth-danger:#a54647;
  --so-auth-radius:16px;
  --so-auth-shadow:0 18px 48px rgba(16,35,42,.065);
  --so-auth-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
html.so-browser-auth-doc body:has(#login-screen:not([hidden])),
html.so-browser-auth-doc body:has(#mfa-screen:not([hidden])),
body.so-standalone-auth{
  background:radial-gradient(ellipse at 74% 27%,#eafbea 0%,#f6f8f4 56%,#fff 100%);
  color:var(--so-auth-copy);
  font-family:var(--so-auth-font);
}
html.so-browser-auth-doc body:has(#login-screen:not([hidden])) .top,
html.so-browser-auth-doc body:has(#mfa-screen:not([hidden])) .top{
  border-bottom:1px solid var(--so-auth-line);
  background:rgba(255,255,255,.97);
  box-shadow:0 1px 12px rgba(15,36,56,.025);
}
html.so-browser-auth-doc body:has(#login-screen:not([hidden])) .topin,
html.so-browser-auth-doc body:has(#mfa-screen:not([hidden])) .topin{
  min-height:70px;padding:12px clamp(16px,3vw,32px);
}
html.so-browser-auth-doc body:has(#login-screen:not([hidden])) .topin .brand img,
html.so-browser-auth-doc body:has(#mfa-screen:not([hidden])) .topin .brand img{
  width:151px;max-width:42vw;height:auto;display:block;
}
/* Editorial CSS uses width:auto!important for mounted brand-core SVGs.
   Reserve the actual header slot so the original SVG cannot collapse to width 0. */
html.so-browser-auth-doc body:has(#login-screen:not([hidden])) .topin .brand,
html.so-browser-auth-doc body:has(#mfa-screen:not([hidden])) .topin .brand{
  display:flex!important;visibility:visible!important;opacity:1!important;
  flex:0 0 151px;min-width:151px;align-items:center;
}
html.so-browser-auth-doc body:has(#login-screen:not([hidden])) .topin .brand img,
html.so-browser-auth-doc body:has(#mfa-screen:not([hidden])) .topin .brand img{
  display:block!important;visibility:visible!important;
  width:151px!important;height:auto!important;max-width:100%!important;
  max-height:none!important;
}
/* Keep the honest Security-Staging identifier and session status visible. */
html.so-browser-auth-doc body:has(#login-screen:not([hidden])) .topin .env,
html.so-browser-auth-doc body:has(#mfa-screen:not([hidden])) .topin .env{
  font-size:11px;border-radius:8px;border-color:var(--so-auth-line);
  color:var(--so-auth-ink);background:var(--so-auth-bg);
}
html.so-browser-auth-doc #login-screen.loginwrap{
  width:min(1120px,100%);
  max-width:1120px;
  margin:clamp(26px,6vh,68px) auto 48px;
  padding:0 clamp(16px,3vw,32px);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.85fr);
  align-items:stretch;
  gap:22px;
}
html.so-browser-auth-doc #login-screen .loginhero{
  margin:0;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(circle at 94% 2%,#eafbea 0%,#fff 63%);
  color:var(--so-auth-dark);
  border:1px solid var(--so-auth-line);
  border-radius:var(--so-auth-radius);
  padding:clamp(24px,4.2vw,56px);
  box-shadow:var(--so-auth-shadow);
}
html.so-browser-auth-doc #login-screen .loginhero small{
  font-size:11px;font-weight:850;letter-spacing:.15em;text-transform:uppercase;
  color:#5b7194;display:flex;align-items:center;gap:12px;
}
html.so-browser-auth-doc #login-screen .loginhero small::before{
  content:"";height:3px;width:28px;display:inline-block;background:var(--so-auth-action);border-radius:3px;
}
html.so-browser-auth-doc #login-screen .loginhero h1{
  margin:16px 0 18px;
  font:850 clamp(35px,3.5vw,54px)/1.055 var(--so-auth-font);
  letter-spacing:-.055em;max-width:580px;color:var(--so-auth-dark);
  overflow-wrap:break-word;
}
html.so-browser-auth-doc #login-screen .loginhero p{
  color:var(--so-auth-muted);font-size:clamp(15px,1.4vw,18px);line-height:1.55;
  max-width:490px;margin:0;
}
html.so-browser-auth-doc #login-screen .loginbox,
html.so-browser-auth-doc #mfa-screen,
body.so-standalone-auth .card{
  min-width:0;background:var(--so-auth-white);
  border:1px solid var(--so-auth-line);border-radius:var(--so-auth-radius);
  box-shadow:var(--so-auth-shadow);
}
html.so-browser-auth-doc #login-screen .loginbox{
  padding:clamp(24px,3vw,44px);
  align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
}
html.so-browser-auth-doc #login-screen .loginbox h2,
html.so-browser-auth-doc #mfa-screen h2,
body.so-standalone-auth h1{
  color:var(--so-auth-dark);font-size:clamp(26px,2.5vw,34px);
  line-height:1.14;letter-spacing:-.04em;font-weight:850;
}
html.so-browser-auth-doc #login-screen .loginbox .muted,
html.so-browser-auth-doc #mfa-screen p,
body.so-standalone-auth .muted{
  color:var(--so-auth-muted);line-height:1.55;
}
html.so-browser-auth-doc #login-screen label,
body.so-standalone-auth label{
  color:var(--so-auth-ink);font-size:13px;font-weight:750;
}
html.so-browser-auth-doc #login-screen :is(input,select,textarea),
body.so-standalone-auth :is(input,select,textarea){
  min-height:46px;border:1px solid #cedae2;background:var(--so-auth-white);
  border-radius:9px;padding:11px 13px;color:var(--so-auth-ink);
  font:inherit;font-size:15px;box-shadow:none;
}
html.so-browser-auth-doc #login-screen :is(input,select,textarea):focus-visible,
body.so-standalone-auth :is(input,select,textarea):focus-visible{
  outline:3px solid rgba(43,186,38,.28);outline-offset:2px;border-color:#258f29;
}
html.so-browser-auth-doc #login-screen .btn,
html.so-browser-auth-doc #mfa-screen .btn,
body.so-standalone-auth .btn{
  min-height:48px;border-radius:8px;padding:11px 20px;
  background:linear-gradient(120deg,#31bb27,#26a724);
  border:1px solid #25a927;color:#fff;
  font:850 14px/1.2 var(--so-auth-font);
  box-shadow:0 5px 14px rgba(41,168,38,.16);
  transition:background .16s ease,transform .16s ease;
}
html.so-browser-auth-doc #login-screen .btn:not(:disabled):hover,
html.so-browser-auth-doc #mfa-screen .btn:not(:disabled):hover,
body.so-standalone-auth .btn:not(:disabled):hover{
  background:var(--so-auth-action-hover);transform:translateY(-1px);
}
html.so-browser-auth-doc :is(#login-screen,#mfa-screen) .btn.secondary{
  background:#fff;color:var(--so-auth-ink);border:1px solid var(--so-auth-line);
  box-shadow:0 2px 10px rgba(15,36,56,.035);
}
html.so-browser-auth-doc #login-screen .btn:focus-visible,
html.so-browser-auth-doc #mfa-screen .btn:focus-visible,
body.so-standalone-auth .btn:focus-visible,
html.so-browser-auth-doc #login-screen a:focus-visible{
  outline:3px solid rgba(43,186,38,.48);outline-offset:3px;
}
html.so-browser-auth-doc #login-screen .btn:disabled,
html.so-browser-auth-doc #mfa-screen .btn:disabled,
body.so-standalone-auth .btn:disabled{
  opacity:.56;box-shadow:none;transform:none;cursor:not-allowed;
}
html.so-browser-auth-doc #login-screen #login-error,
body.so-standalone-auth .msg.bad{color:var(--so-auth-danger)}
html.so-browser-auth-doc #login-screen .login-help{line-height:1.6;color:var(--so-auth-muted)}
html.so-browser-auth-doc #login-screen .login-help a{
  color:#18772b;text-decoration:underline;text-underline-offset:4px;
}
html.so-browser-auth-doc #mfa-screen{
  width:min(700px,calc(100% - 32px));max-width:700px;
  margin:clamp(24px,6vh,64px) auto;
  padding:clamp(24px,3.5vw,42px);
}
html.so-browser-auth-doc #mfa-screen .btn{margin-top:12px}
body.so-standalone-auth .wrap{
  width:min(720px,100%);max-width:720px;
  margin:0 auto;padding:clamp(20px,5vh,54px) clamp(16px,3vw,28px) 56px;
}
body.so-standalone-auth .brand{
  margin:0 0 28px;display:flex;align-items:center;line-height:1;
}
body.so-standalone-auth .brand img{
  width:151px;max-width:55vw;height:auto;display:block;
}
body.so-standalone-auth .card{padding:clamp(22px,3.8vw,40px);margin-bottom:16px}
body.so-standalone-auth h1{margin:0 0 12px}
body.so-standalone-auth .btn{margin-top:18px;max-width:100%}
body.so-standalone-auth .msg.ok{color:#18772b}
@media(max-width:860px){
  html.so-browser-auth-doc #login-screen.loginwrap{
    grid-template-columns:minmax(0,1fr);gap:12px;
    margin:20px auto 32px;
  }
  html.so-browser-auth-doc #login-screen .loginhero{padding:26px 24px}
  html.so-browser-auth-doc #login-screen .loginhero h1{font-size:clamp(32px,6vw,43px);margin:12px 0}
  html.so-browser-auth-doc #login-screen .loginbox{padding:26px 24px}
}
@media(max-width:390px){
  html.so-browser-auth-doc body:has(#login-screen:not([hidden])) .topin .brand,
  html.so-browser-auth-doc body:has(#mfa-screen:not([hidden])) .topin .brand{
    flex-basis:118px;min-width:118px;
  }
  html.so-browser-auth-doc #login-screen.loginwrap{padding:0 12px;margin-top:12px}
  html.so-browser-auth-doc #login-screen .loginhero{padding:24px 20px}
  html.so-browser-auth-doc #login-screen .loginhero h1{font-size:clamp(30px,9.3vw,36px)}
  html.so-browser-auth-doc #login-screen .loginbox{padding:23px 20px}
  html.so-browser-auth-doc body:has(#login-screen:not([hidden])) .topin,
  html.so-browser-auth-doc body:has(#mfa-screen:not([hidden])) .topin{
    padding:12px;gap:8px;flex-wrap:wrap;
  }
  html.so-browser-auth-doc body:has(#login-screen:not([hidden])) .topin .env,
  html.so-browser-auth-doc body:has(#mfa-screen:not([hidden])) .topin .env{
    font-size:10px;padding:5px 7px;
  }
  body.so-standalone-auth .wrap{padding:20px 12px 42px}
  body.so-standalone-auth .card{padding:22px 20px}
}
@media(prefers-reduced-motion:reduce){
  html.so-browser-auth-doc #login-screen .btn,
  html.so-browser-auth-doc #mfa-screen .btn,
  body.so-standalone-auth .btn{transition:none;transform:none!important}
}