/* Экран входа: пароль, E-IMZO, Okta.

   Source: maosh_saas_demo.html <style> block, lines 38-106.
   Do not restyle while porting: divergence from the prototype is a defect
   (build prompt §2, §3.5). */

/* ═══ вход ════════════════════════════════════════════════════════ */
.auth{flex:1;display:grid;grid-template-columns:minmax(320px,44%) 1fr;min-height:0}
.hero{background:var(--brand);color:var(--brand-ink);padding:44px 46px;
  display:flex;flex-direction:column;overflow:auto}
.hero .tag{margin-top:34px;font-family:var(--head);
  font-variation-settings:"wdth" 108,"wght" 600;font-size:26px;line-height:1.25;
  max-width:15ch}
.hero .sub{margin-top:14px;font-size:14px;line-height:1.75;max-width:42ch;
  color:var(--brand-sub)}
.hero ul{margin-top:30px;list-style:none;border-top:1px solid var(--brand-line)}
.hero li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--brand-line);
  font-size:13.5px;align-items:baseline}
.hero li b{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--brand-faint);flex:0 0 30px}
.hero .foot{margin-top:auto;padding-top:32px;font-size:11.5px;color:var(--brand-faint);
  font-family:var(--mono);line-height:1.9}
.pane{background:var(--paper);display:flex;align-items:center;justify-content:center;
  padding:40px 24px;overflow:auto}
.box{width:100%;max-width:404px}
.box h1{font-family:var(--head);font-variation-settings:"wdth" 110,"wght" 600;
  font-size:21px;margin-bottom:5px}
.box .lead{font-size:13px;color:var(--ink2);margin-bottom:22px;line-height:1.6}
.mtabs{display:flex;border:1px solid var(--rule2);background:var(--card);margin-bottom:20px}
.mtabs button{flex:1;padding:9px 6px;font-size:12.5px;color:var(--ink3);text-align:center;
  border-right:1px solid var(--rule)}
.mtabs button:last-child{border-right:none}
.mtabs button:hover{color:var(--ink2);background:var(--hover)}
.mtabs button.on{background:var(--brand);color:var(--brand-ink);font-weight:600}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  font-family:var(--head);font-variation-settings:"wdth" 112,"wght" 500;
  color:var(--ink3);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--card);
  border:1px solid var(--rule2);padding:9px 10px;font-size:14px;outline:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--srv)}
.fld .sfx{font-size:12px;color:var(--ink3);margin-top:5px;line-height:1.5}
.fld.bad input{border-color:var(--del);background:var(--cli-bg)}
.wide{width:100%;justify-content:center;text-align:center}
.err{border:1px solid var(--cli-line);background:var(--cli-bg);color:var(--cli);
  padding:9px 11px;font-size:12.5px;margin-bottom:14px;line-height:1.5}
.note{border:1px solid var(--rule);background:var(--card);padding:11px 13px;
  font-size:12.5px;color:var(--ink2);line-height:1.65}
.note.brand{border-color:var(--brand-line);background:var(--brand-soft)}
.legal{margin-top:20px;font-size:11.5px;color:var(--ink3);line-height:1.7}
.keyrow{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;
  border:1px solid var(--rule2);background:var(--card);margin-bottom:8px;cursor:pointer;
  width:100%}
.keyrow:hover{border-color:var(--srv)}
.keyrow.on{border-color:var(--srv);background:var(--srv-bg)}
.keyrow .rad{width:13px;height:13px;border:1px solid var(--rule2);flex:0 0 13px;
  margin-top:3px;background:var(--card)}
.keyrow.on .rad{border-color:var(--srv);box-shadow:inset 0 0 0 3px var(--srv-bg);
  background:var(--srv)}
.keyrow .kn{font-size:13px;font-weight:500}
.keyrow .kd{font-size:11.5px;color:var(--ink3);font-family:var(--mono);margin-top:3px;
  line-height:1.6}
.okta{border:1px solid var(--rule2);background:var(--card);padding:0;margin-bottom:16px}
.okta .oh{display:flex;align-items:center;gap:9px;padding:8px 11px;
  border-bottom:1px solid var(--rule);background:var(--sunk);font-family:var(--mono);
  font-size:11px;color:var(--ink3)}
.okta .ob{padding:22px 18px;text-align:center}
.bar{height:3px;background:var(--sunk);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;background:var(--srv);width:0;transition:width .35s linear}
.qrbox{display:grid;grid-template-columns:repeat(11,1fr);gap:2px;width:154px;height:154px;
  margin:0 auto 14px;padding:8px;background:#fff;border:1px solid var(--rule2)}
.qrbox i{background:var(--ink)}
.qrbox i.o{background:transparent}

/* ═══ первичная настройка (§21.4) ═════════════════════════════════ */
/* Не из прототипа: в нём этого экрана нет — он существует только в
   локальной поставке, где нет контура управления. Токены и полярность
   те же, что у входа, потому что это та же дверь. */
.box.setup{max-width:560px}
.box.setup .sech{margin:26px 0 12px}
.box.setup .note{margin-bottom:14px}
.box.setup .fld input+input{margin-top:6px}