/* ==========================================================================
   RIDEHOST: вход, регистрация, восстановление пароля и экраны результата (assets/css/pages/auth.css)
   Подключается из account/parts/authhead.php. Цвета — только токены rh.css, обе темы.
   Раскладка: слева форма, справа арт игр (только на широком экране); на телефоне форма на весь экран.
   ========================================================================== */

.rh-auth{margin:0;min-height:100vh}
.rh-auth__app{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rh-auth--solo .rh-auth__app{grid-template-columns:minmax(0,1fr)}

/* ---------- левая колонка ---------- */
.rh-auth__pane{--auth-w:520px;display:flex;flex-direction:column;min-width:0;padding:16px clamp(20px,4vw,56px) 24px}
.rh-auth--solo .rh-auth__pane{--auth-w:560px}
.rh-auth__top,.rh-auth__foot{width:100%;max-width:var(--auth-w);margin-inline:auto}
.rh-auth__top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px;flex:none}
.rh-auth__main{flex:1 0 auto;display:flex;align-items:center;justify-content:center;padding:24px 0}
.rh-auth__card{width:100%;max-width:var(--auth-w);background:var(--rh-surface);border-radius:var(--rh-r-xl);box-shadow:var(--rh-sh-1);padding:40px;color:var(--rh-ink)}

.rh-auth__h1{font:800 clamp(30px,2.6vw,40px)/1.08 var(--rh-f-d);letter-spacing:-.025em;margin:0;color:var(--rh-ink);overflow-wrap:anywhere}
.rh-auth__lead{margin:12px 0 0;font-size:17px;line-height:1.45;color:var(--rh-ink-2)}
.rh-auth__flashes{display:grid;gap:10px;margin-top:20px}
.rh-auth__flashes:empty{display:none}
.rh-auth form{margin:24px 0 0}

/* ---------- поля ---------- */
.rh-auth__field{margin:0 0 18px;min-width:0}
.rh-auth__field label{display:block;margin:0 0 8px;font-weight:700;font-size:16px;line-height:1.2;color:var(--rh-ink)}
.rh-auth__in{display:block;width:100%;min-height:56px;padding:0 16px;font:500 17px/1.2 var(--rh-f-u);color:var(--rh-ink);background:var(--rh-surface-2);
  border:2px solid var(--rh-line-strong);border-radius:var(--rh-r-m);box-shadow:none;appearance:none;-webkit-appearance:none;transition:border-color .15s}
.rh-auth__in::placeholder{color:var(--rh-muted);opacity:.85}
.rh-auth__in:hover{border-color:var(--rh-ink-2)}
.rh-auth__in:focus{outline:3px solid var(--rh-focus);outline-offset:2px;border-color:var(--rh-ink);background:var(--rh-surface-2);color:var(--rh-ink);box-shadow:none}
.rh-auth__in:-webkit-autofill{-webkit-text-fill-color:var(--rh-ink);box-shadow:0 0 0 100px var(--rh-surface-2) inset;caret-color:var(--rh-ink)}
.rh-auth__lrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.rh-auth__lrow label{margin:0}
.rh-auth__lnk{display:inline-flex;align-items:center;min-height:32px;font-weight:600;font-size:15px;color:var(--rh-accent-text)!important;text-decoration:underline;text-underline-offset:4px}
.rh-auth__lnk:hover{color:var(--rh-accent-hover)!important}
.rh-auth__pw{position:relative}
.rh-auth__pw .rh-auth__in{padding-right:116px}
.rh-auth__show{position:absolute;right:6px;top:6px;height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;font:600 15px/1 var(--rh-f-u);color:var(--rh-ink-2);cursor:pointer}
.rh-auth__show:hover{background:var(--rh-hover);color:var(--rh-ink)}
.rh-auth__hint{margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--rh-muted)}
.rh-auth__nw{white-space:nowrap;font-family:var(--rh-f-m);font-weight:600;color:var(--rh-ink-2)}
.rh-auth__hint--gap{margin:-6px 0 18px}
.rh-auth__hint--alt{margin:-2px 2px 0;text-align:center}
.rh-auth__row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rh-auth__captcha{margin:0 0 18px;max-width:100%;overflow-x:auto}
.rh-auth__ref{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:12px 16px;border-radius:var(--rh-r-m);background:var(--rh-ok-soft);color:var(--rh-ok-ink);font-size:16px;line-height:1.35}

/* ---------- кнопки и альтернативы ---------- */
.rh-auth__go{margin-top:6px}
.rh-auth__or{display:flex;align-items:center;gap:14px;margin:22px 0 16px;color:var(--rh-muted);font-size:15px;font-weight:600}
.rh-auth__or::before,.rh-auth__or::after{content:"";flex:1;height:1px;background:var(--rh-line)}
.rh-auth__alt{display:grid;gap:12px}
.rh-auth__alt .rh-btn{text-decoration:none}
.rh-auth__vkmark{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 7px;border-radius:8px;background:var(--rh-info-soft);color:var(--rh-info);font:800 13px/1 var(--rh-f-u);letter-spacing:.02em}
.rh-auth__wait{padding:14px 16px;border-radius:var(--rh-r-m);background:var(--rh-info-soft);color:var(--rh-info)}
.rh-auth__wait--ok{background:var(--rh-ok-soft);color:var(--rh-ok-ink)}
.rh-auth__wait--warn{background:var(--rh-warn-soft);color:var(--rh-warn)}
.rh-auth__wait-row{display:flex;gap:12px;align-items:flex-start}
.rh-auth__wait-row .rh-i{margin-top:1px}
.rh-auth__wait-row b{display:block;font-size:16px;font-weight:700;line-height:1.3}
.rh-auth__wait-row small{display:block;margin-top:3px;font-size:15px;line-height:1.4;font-weight:500}
.rh-auth__wait a{text-decoration:underline;text-underline-offset:3px;font-weight:700}
.rh-auth__swap{margin-top:28px;padding-top:22px;border-top:1px solid var(--rh-line-2);text-align:center}
.rh-auth__swap span{display:block;margin-bottom:12px;font-size:16px;color:var(--rh-ink-2)}
.rh-auth__swap .rh-btn,.rh-auth__vk{border-color:var(--rh-line-strong)}
.rh-auth__swap .rh-btn:hover,.rh-auth__vk:hover{border-color:var(--rh-ink)}
.rh-auth__swap .rh-btn{text-decoration:none}
.rh-auth__legal{margin:14px 0 0;font-size:14px;line-height:1.45;color:var(--rh-muted)}
.rh-auth__legal a{text-decoration:underline;text-underline-offset:3px}
.rh-auth__legal a:hover{color:var(--rh-ink)}

/* ---------- подвал ---------- */
.rh-auth__foot{flex:none;padding-top:8px}
.rh-auth__links{display:flex;flex-wrap:wrap;gap:2px 20px}
.rh-auth__links a{display:inline-flex;align-items:center;min-height:40px;font-size:15px;font-weight:500;color:var(--rh-ink-2);text-decoration:underline;text-decoration-color:var(--rh-line-strong);text-underline-offset:4px}
.rh-auth__links a:hover{color:var(--rh-ink);text-decoration-color:currentColor}
.rh-auth__copy{margin:6px 0 0;font-size:14px;color:var(--rh-muted)}
.rh-auth__copy strong{color:var(--rh-ink-2)}

/* ---------- арт игр (подложка справа) ---------- */
.rh-auth__art{position:sticky;top:0;height:100vh;height:100dvh;padding:16px 16px 16px 0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,minmax(0,1fr));gap:14px}
.rh-auth__tile{position:relative;margin:0;border-radius:28px;overflow:hidden;background:var(--rh-t-sand);min-height:0}
.rh-auth__tile img{width:100%;height:100%;object-fit:cover;display:block}
:root[data-theme="dark"] .rh-auth__tile img{filter:brightness(.86)}
.rh-auth__tile figcaption{position:absolute;left:16px;bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(20,18,16,.78);color:#fff;font-weight:700;font-size:14px;line-height:1.2}
.rh-auth__tile--samp{grid-column:1;grid-row:1 / span 2}
.rh-auth__tile--crmp{grid-column:2;grid-row:1}
.rh-auth__tile--mta{grid-column:2;grid-row:2}
.rh-auth__tile--minecraft{grid-column:1;grid-row:3}
.rh-auth__tile--ragemp{grid-column:1;grid-row:4}
.rh-auth__tile--cs16{grid-column:2;grid-row:3 / span 2}

/* ---------- экраны результата (почта, новый пароль, ошибка) ---------- */
.rh-auth__card--result .rh-status{margin:0 0 20px}
.rh-auth__card--result .rh-status b{font-size:16px}
.rh-auth__acts{display:grid;gap:10px;margin-top:26px}
.rh-auth__acts .rh-btn{text-decoration:none}
.rh-auth__note{margin:16px 0 0;font-size:15px;line-height:1.45;color:var(--rh-muted)}
.rh-auth__secret{display:flex;align-items:center;gap:8px;margin-top:22px;padding:6px 6px 6px 16px;border:2px solid var(--rh-line);border-radius:var(--rh-r-m);background:var(--rh-bg)}
.rh-auth__secret code{flex:1;min-width:0;font:600 18px/1.3 var(--rh-f-m);color:var(--rh-ink);background:none;padding:0;overflow-wrap:anywhere;user-select:all}
.rh-auth__secret .rh-btn{min-height:48px;border-radius:12px;padding:0 16px}

/* ---------- модальное окно «Обратная связь» (Bootstrap): подсказки по теме ---------- */
#hostin_supports .modal-content{border-radius:var(--rh-r-l)}

/* ---------- планшет и телефон ---------- */
@media (max-width:1000px){
  .rh-auth__app{grid-template-columns:minmax(0,1fr)}
  .rh-auth__art{display:none}
}
@media (max-width:760px){
  .rh-auth__pane,.rh-auth--solo .rh-auth__pane{--auth-w:100%;padding:0}
  .rh-auth__top{padding:0 16px}
  .rh-auth__main{padding:0;align-items:stretch}
  .rh-auth__card{max-width:none;border-radius:28px 28px 0 0;box-shadow:none;padding:28px 20px 32px}
  .rh-auth__h1{font-size:30px}
  .rh-auth__lead{font-size:16px}
  .rh-auth__foot{padding:16px 16px 28px}
  .rh-auth__links{gap:0 18px}
  .rh-auth__in{font-size:17px}
  .rh-auth__secret{flex-wrap:wrap;padding:12px}
  .rh-auth__secret code{flex:1 1 100%}
  .rh-auth__secret .rh-btn{flex:1 1 100%}
  #toast-container{left:0;right:0}
  .toast-top-right{top:72px!important;right:8px!important}
}
@media (max-width:360px){
  .rh-auth__row2{grid-template-columns:1fr;gap:0}
  .rh-auth__hint--gap{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.rh-auth *{animation:none!important;transition:none!important}}