/* SMM.UA — окно входа (все страницы, js/auth.js): вход, регистрация, код подтверждения, восстановление пароля, новый пароль,
   «Готово», тост. Подключается после styles.css (токены, кнопки .btn-g). Префикс au-. На компьютере — окно 920px с панелью
   преимуществ слева, на телефоне (≤760px) — на весь экран, верхняя полоса с вкладками закреплена.
   Окно лежит в #auth-root.mo.au-root в конце body: класс mo даёт ему токены и тему, сам контейнер места не занимает. */
.mo.au-root{min-height:0;background:none}
.mo{--au-bad:#FDEEEE;--au-warn:#8A5A00;--au-m1:#C4181E;--au-m2:#D97A00;--au-m3:#4A8432;--au-m4:#2B7A0B}
.mo.is-dark{--au-bad:#3A1E21;--au-warn:#F0C566;--au-m1:#FF8087;--au-m2:#F2A64A;--au-m3:#8FD35F;--au-m4:#A8E27E}
.au{position:fixed;inset:0;z-index:95;display:flex;padding:32px 24px;overflow-y:auto;background:var(--dim);animation:auFade .2s ease-out}
.au-box{position:relative;display:grid;grid-template-columns:360px minmax(0,1fr);width:100%;max-width:920px;margin:auto;border-radius:12px;background:var(--card);box-shadow:var(--sh3);color:var(--ink);outline:0;overflow:hidden;animation:auIn .26s cubic-bezier(.2,.8,.2,1)}
@keyframes auFade{from{opacity:0}to{opacity:1}}
@keyframes auIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes auSpin{to{transform:rotate(360deg)}}
@keyframes auBlink{50%{opacity:0}}

/* the brand panel (computer) */
.au-side{display:flex;flex-direction:column;gap:22px;padding:36px 32px 30px;background:linear-gradient(165deg,var(--tint) 0%,var(--soft) 78%)}
.au-logo{display:block;width:169px;height:auto}
.au-sh{margin:6px 0 0;font-size:24px;line-height:1.22;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.au-ben{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.au-ben li,.au-tip{display:flex;align-items:flex-start;gap:12px}
.au-bi{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--card);color:var(--link);box-shadow:var(--sh)}
.au-ben b,.au-tip b{display:block;font-size:15px;line-height:1.3;font-weight:700}
.au-ben small,.au-tip small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--mut)}
.au-proof{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--hair)}
.au-avs{display:flex;flex:none}
.au-avs img{width:32px;height:32px;border-radius:50%;border:2px solid var(--card);object-fit:cover;background:var(--sk)}
.au-avs img + img{margin-left:-10px}
.au-proof small{font-size:13px;line-height:1.4;font-weight:600;color:var(--ink2)}
.au-tip + .au-tip{margin-top:-4px}

/* the form side */
.au-main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:620px;padding:20px 44px 32px}
.au-top{display:flex;align-items:center;gap:12px;min-height:44px;margin:0 -20px 22px 0}
.au-top .au-tabs{flex:1;margin:0}
.au-mlogo{display:none}
.au-x{width:44px;height:44px;margin-left:auto;flex:none;border:0;border-radius:var(--rc);background:none;display:grid;place-items:center;color:var(--mut);cursor:pointer}
.au-x:hover{background:var(--soft);color:var(--ink)}
.au-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-left:-10px;padding:0 10px 0 4px;border:0;border-radius:var(--rc);background:none;font-family:inherit;font-size:15px;font-weight:700;color:var(--ink2);cursor:pointer}
.au-back:hover{background:var(--soft);color:var(--ink)}
.au-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:8px;background:var(--chip)}
.au-tab{height:44px;border:0;border-radius:6px;background:none;font-family:inherit;font-size:16px;font-weight:700;color:var(--mut);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.au-tab:hover{color:var(--ink)}
.au-tab[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.au-pane{display:flex;flex-direction:column;flex:1 0 auto}
.au-form{display:flex;flex-direction:column;gap:14px}
.au-hd{display:flex;flex-direction:column;gap:4px}
.au-h{margin:0;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.au-sub{margin:0;font-size:15px;line-height:1.5;color:var(--mut)}
.au-sub b{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.au-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:-2px;background:var(--tint);color:var(--link)}

/* Google */
.au-g{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:50px;padding:0 20px;border:1px solid var(--bd);border-radius:var(--rc);background:var(--card);font-family:inherit;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
.au-g:hover{border-color:var(--hair-h);background:var(--soft)}
.au-gi{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--chip);color:var(--ink2)}
.au-g .au-spin{position:absolute;right:18px;display:none}
.au-g.busy{cursor:progress;background:var(--soft)}
.au-g.busy .au-spin{display:block}
.au-legal{margin:-4px 0 0;font-size:13px;line-height:1.45;color:var(--mut);text-align:center}
.au-legal a{color:var(--link);font-weight:600;text-decoration:none}
.au-legal a:hover{text-decoration:underline}
.au-or{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--mut)}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:var(--hair)}

/* fields */
.au-f{display:flex;flex-direction:column;gap:6px}
.au-l{font-size:15px;font-weight:700;color:var(--ink)}
.au-lr{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.au-in{display:flex;align-items:center;gap:10px;height:50px;padding:0 6px 0 14px;border:1px solid var(--bd);border-radius:var(--rc);background:var(--card);color:var(--mut);transition:border-color .2s,box-shadow .2s}
.au-in:hover{border-color:var(--hair-h)}
.au-in:focus-within{border-color:var(--link);box-shadow:0 0 0 3px var(--ring);color:var(--ink2)}
.au-in > svg{flex:none}
.au-in input{flex:1;min-width:0;height:100%;padding:0 8px 0 0;border:0;outline:0;background:transparent;font-family:inherit;font-size:16px;color:var(--ink)}
.au-in input::placeholder{color:var(--ph);opacity:1}
.au-f.bad .au-in{border-color:var(--neg)}
.au-f.bad .au-in:focus-within{box-shadow:0 0 0 3px var(--au-bad)}
.au-eye{width:40px;height:40px;flex:none;border:0;border-radius:var(--rc);background:none;display:grid;place-items:center;color:var(--mut);cursor:pointer}
.au-eye:hover{background:var(--soft);color:var(--ink)}
.au-err,.au-ok,.au-caps{display:flex;align-items:flex-start;gap:6px;font-size:13px;line-height:1.45;font-weight:600}
.au-err{color:var(--neg)}
.au-err svg,.au-ok svg,.au-caps svg{flex:none;margin-top:1px}
.au-err .au-lnk{margin-left:4px;font-size:13px}
.au-ok{color:var(--link)}
.au-caps{color:var(--au-warn)}
.au-hint{font-size:13px;line-height:1.45;color:var(--mut)}
.au-fix{font-size:13px;line-height:1.45;color:var(--ink2)}
.au-fix button{padding:0;border:0;background:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--link);text-decoration:underline;cursor:pointer}
.au-lnk{padding:0;border:0;background:none;font-family:inherit;font-size:inherit;font-weight:700;color:var(--link);cursor:pointer;text-decoration:none}
.au-lnk:hover{text-decoration:underline}
.au-lr .au-lnk{font-size:14px}

/* password strength */
.au-meter{display:flex;align-items:center;gap:10px;min-height:18px}
.au-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1}
.au-bars i{height:4px;border-radius:2px;background:var(--trk);transition:background .25s}
.au-ml{min-width:96px;font-size:13px;font-weight:700;text-align:right;color:var(--mut)}
.au-meter.s1 .au-bars i:nth-child(-n+1){background:var(--au-m1)}
.au-meter.s2 .au-bars i:nth-child(-n+2){background:var(--au-m2)}
.au-meter.s3 .au-bars i:nth-child(-n+3){background:var(--au-m3)}
.au-meter.s4 .au-bars i{background:var(--au-m4)}
.au-meter.s1 .au-ml{color:var(--au-m1)}
.au-meter.s2 .au-ml{color:var(--au-m2)}
.au-meter.s3 .au-ml,.au-meter.s4 .au-ml{color:var(--au-m3)}
.au-req{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none}
.au-req li{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--mut)}
.au-req li svg{width:16px;height:16px;padding:2px;border-radius:50%;background:var(--trk);color:var(--card)}
.au-req li.ok{color:var(--ink2)}
.au-req li.ok svg{background:var(--link);color:var(--on-link)}

/* checkboxes */
.au-cb{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;font-family:inherit;font-size:15px;line-height:1.4;color:var(--ink);text-align:left;cursor:pointer;align-self:flex-start}
.au-cbx{width:22px;height:22px;border:2px solid var(--bd);border-radius:5px;display:grid;place-items:center;flex:none;background:var(--card);color:transparent;transition:background .15s,border-color .15s}
.au-cb:hover .au-cbx{border-color:var(--link)}
.au-cb[aria-checked="true"] .au-cbx{background:var(--link);border-color:var(--link);color:var(--on-link)}

/* buttons */
.au-go{width:100%;height:52px;margin-top:4px;font-size:17px}
.au-go .au-spin{display:none}
.au-go.busy{cursor:progress;filter:saturate(.85)}
.au-go.busy .au-spin{display:block}
.au-spin{width:18px;height:18px;flex:none;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:auSpin .7s linear infinite}
.au-alt{margin:0;text-align:center;font-size:15px;color:var(--mut)}
.au-note{margin:0;font-size:13px;line-height:1.5;color:var(--mut);text-align:center}
.au-resend{margin:-4px 0 0;font-size:14px;color:var(--mut)}
.au-resend b{font-variant-numeric:tabular-nums;color:var(--ink)}

/* error banner */
.au-banner{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--rc);background:var(--au-bad);color:var(--neg);font-size:14px;line-height:1.45;font-weight:600}
.au-banner svg{flex:none}
.au-banner .au-lnk{margin-left:4px}

/* the 6-digit code: one real input over six cells (paste and autofill work as usual) */
.au-otp{position:relative;height:60px}
.au-otp-in{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;font-size:16px;cursor:text}
.au-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;height:100%;pointer-events:none}
.au-cell{position:relative;display:grid;place-items:center;border:1px solid var(--bd);border-radius:8px;background:var(--card);font-size:26px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s}
.au-cell.on{border-color:var(--hair-h)}
.au-otp-in:focus + .au-cells .au-cell.cur{border-color:var(--link);box-shadow:0 0 0 3px var(--ring)}
.au-otp-in:focus + .au-cells .au-cell.cur:not(.on)::after{content:"";width:2px;height:28px;background:var(--ink);animation:auBlink 1s step-end infinite}
.au-f.bad .au-cell{border-color:var(--neg)}

/* done */
.au-done{display:flex;flex-direction:column;align-items:center;text-align:center;margin:auto 0;padding:12px 0 4px;outline:0}
.au-big{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;background:var(--tint);color:var(--link);animation:auIn .35s cubic-bezier(.2,.8,.2,1)}
.au-done .au-sub{max-width:400px;margin-top:8px}
.au-next{display:flex;flex-direction:column;gap:8px;width:100%;margin:22px 0 8px;padding:0;list-style:none;text-align:left}
.au-next a{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 12px 10px 14px;border:1px solid var(--hair);border-radius:var(--r);color:var(--ink);text-decoration:none;transition:border-color .2s,background .2s}
.au-next a:hover{border-color:var(--link);background:var(--soft)}
.au-next a > svg{margin-left:auto;flex:none;color:var(--mut)}
.au-ni{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--tint);color:var(--link)}
.au-next b{display:block;font-size:15px;font-weight:700}
.au-next small{display:block;margin-top:2px;font-size:13px;color:var(--mut)}
.au-done .au-go{margin-top:12px}

/* toast */
.au-toast{position:fixed;left:50%;bottom:28px;z-index:96;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:12px 18px;border-radius:8px;background:var(--k-bg);color:var(--k-fg);box-shadow:var(--sh3);font-size:15px;font-weight:600;transform:translateX(-50%);animation:auToast .25s cubic-bezier(.2,.8,.2,1)}
.au-toast svg{flex:none;color:var(--acc)}
@keyframes auToast{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translateX(-50%)}}

/* header: the sign-in item is a button that opens the dialog; after signing in — the avatar and the name */
button.hi{border:0;background:none;font-family:inherit;cursor:pointer}
.hi:hover{color:var(--link)}
.hi.au-me img{width:26px;height:26px;border-radius:50%;object-fit:cover}

/* phones: the dialog takes the whole screen */
@media (max-width:760px){
  .au{padding:0;background:var(--card);animation:none}
  .au-box{grid-template-columns:minmax(0,1fr);max-width:none;min-height:100%;margin:0;border-radius:0;box-shadow:none;overflow:visible;animation:auUp .28s cubic-bezier(.2,.8,.2,1)}
  @keyframes auUp{from{opacity:.4;transform:translateY(40px)}to{opacity:1;transform:none}}
  .au-side{display:none}
  .au-main{min-height:100%;padding:0 16px 28px}
  .au-top{position:sticky;top:0;z-index:2;flex-wrap:wrap;gap:0;min-height:56px;margin:0 -16px 12px;padding:6px 6px 6px 16px;background:var(--card)}
  .au-top .au-back{margin-left:-12px}
  .au-mlogo{display:block;width:141px;height:auto}
  .au-top .au-tabs{order:3;flex:0 0 calc(100% - 10px);margin:6px 0 6px}
  .au-h{font-size:24px}
  .au-otp{height:56px}
  .au-cells{gap:8px}
  .au-cell{font-size:24px}
  .au-done{margin:24px 0 0}
  .au-toast{bottom:84px}
}
@media (prefers-reduced-motion:reduce){
  .au,.au-box,.au-big,.au-toast{animation:none}
  .au-spin{animation-duration:1.6s}
}