/* Оформление страниц входа, смены пароля, выхода и установки.
   Палитра платформы Clubflow: графит, лайм и тёплый светлый фон —
   команда цветом появляется уже внутри приложения. */

:root{
  --lime:#D3F308; --lime-ink:#23241B; --lime-soft:rgba(211,243,8,.16);
  --page:#F3F4EE; --surface:#FFFFFF; --field:#FBFBF8;
  --ink:#1C1D17; --ink-2:#4A4D3F; --muted:#6E7167;
  --line:#E9EAE3; --line-field:#D9DBCE;
  --side:#20211A; --side-text:#B9BBA9; --side-title:#85877A; --side-bright:#F4F5EC;
  --link:#4F5B10; --link-hover:#3B440C;
  --red:#C63D3D; --green:#1F8A50;
  /* Цвет команды: подставляет страница входа; по умолчанию — лайм платформы. */
  --brand:var(--side); --brand-deep:var(--side); --brand-soft:var(--lime-soft); --on-brand:var(--side-bright);
  --shadow:0 20px 60px rgba(16,24,40,.08);
  --font:"Manrope","Golos Text","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body.auth{
  margin:0;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 18px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(340px 260px at 100% -5%, var(--brand-soft), transparent 70%),
    var(--page);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-decoration:none;}
a:hover{color:var(--link-hover);}

/* ---------- карточка (общая для всех страниц) ---------- */

.auth-card{
  width:100%;
  max-width:440px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:26px;
  padding:32px 28px 28px;
  box-shadow:var(--shadow);
  text-align:left;
}
@media (min-width:600px){
  .auth-card{padding:40px;}
}

.auth-logo{
  width:56px;height:56px;
  margin:0 0 18px;
  display:block;
  border-radius:18px;
}

.auth-eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;
}
.auth-title{
  font-weight:800;
  font-size:24px;line-height:1.15;letter-spacing:-.01em;
  margin:0;color:var(--ink);
}
.auth-sub{margin:6px 0 20px;font-size:13px;color:var(--muted);}

.auth-error,.auth-ok{
  margin:0 0 18px;padding:11px 14px;
  border-radius:12px;
  font-size:13.5px;text-align:left;color:var(--ink);
}
.auth-error{background:rgba(198,61,61,.10);border:1px solid rgba(198,61,61,.25);}
.auth-ok{background:var(--lime-soft);border:1px solid rgba(211,243,8,.5);}

.auth-form{display:flex;flex-direction:column;gap:16px;text-align:left;}

.fld{display:block;}
.fld-label{
  display:block;
  font-size:12px;font-weight:800;
  color:var(--ink-2);margin-bottom:7px;
}
.fld input{
  width:100%;
  /* 16px — иначе Safari на айфоне приближает страницу при фокусе */
  font:16px/1.4 var(--font);
  color:var(--ink);
  background:var(--field);
  padding:13px 16px;
  border:1px solid var(--line-field);
  border-radius:13px;
  transition:border-color .15s, box-shadow .15s;
}
.fld input::placeholder{color:#A3A69A;}
.fld input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}

.remember{
  display:flex;align-items:center;gap:12px;
  font-size:13px;color:var(--ink-2);cursor:pointer;
}
.remember input{width:17px;height:17px;accent-color:var(--brand);margin:0;flex:0 0 auto;}

.auth-btn{
  margin-top:2px;
  appearance:none;border:0;cursor:pointer;width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font:800 14px/1 var(--font);
  color:var(--on-brand);
  background:var(--brand);
  padding:15px 24px;border-radius:99px;
  transition:filter .15s, transform .06s;
}
.auth-btn:hover{filter:brightness(1.15);}
.auth-btn:active{transform:translateY(1px);}
.auth-btn:focus-visible{outline:3px solid var(--lime);outline-offset:2px;}
.auth-btn i{
  width:22px;height:22px;border-radius:50%;background:var(--lime);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.auth-btn i svg{width:13px;height:13px;}

.auth-meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12px;color:var(--muted);
}

.auth-help{
  margin:20px 0 0;
  font-size:12px;color:var(--muted);text-align:center;line-height:1.5;
}
.auth-sep{
  display:flex;align-items:center;gap:12px;margin:20px 0 0;
  font-size:11px;color:var(--muted);
}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line);}
.auth-sep + .auth-help{margin-top:10px;}

.hint{
  margin:-6px 0 0;
  font-size:12.5px;color:var(--muted);
}

/* ---------- показать пароль ---------- */

.pw-box{position:relative;display:block;}

/* Место под кнопку, чтобы текст под неё не заезжал. */
.pw-box input{padding-right:52px;}

.pw-eye{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  appearance:none;border:0;background:transparent;cursor:pointer;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  border-radius:10px;
}
.pw-eye:hover{color:var(--ink);}
.pw-eye:focus-visible{outline:2px solid var(--side);outline-offset:-2px;}
.pw-eye svg{width:18px;height:18px;}

/* ---------- страница входа: бренд + форма ---------- */

/* На телефоне — как в приложении семей: знак по центру, форма под ним.
   На широком экране — панель бренда слева, форма справа. */

.login{
  width:100%;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}

.login-brand{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;
}
.login-mark{
  width:64px;height:64px;border-radius:20px;background:var(--brand);color:var(--on-brand);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;
  box-shadow:0 16px 40px rgba(32,33,26,.3);
}
.login-logo{width:72px;height:72px;border-radius:22px;display:block;object-fit:contain;}
.login-wordmark{font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.login-brand h1{margin:6px 0 0;font-size:22px;font-weight:800;}
.login-brand p{margin:0;font-size:13px;color:var(--muted);max-width:300px;line-height:1.5;}

.login-side{display:none;}

@media (min-width:960px){
  body.auth.has-side{padding:0;background:var(--page);align-items:stretch;}

  .login{
    flex-direction:row;align-items:stretch;gap:0;
    min-height:100dvh;
  }
  .login-brand{display:none;}

  .login-side{
    display:flex;flex-direction:column;gap:32px;
    width:42%;max-width:600px;min-width:380px;flex-shrink:0;
    padding:56px;
    background:
      radial-gradient(560px 380px at 90% -10%, rgba(255,255,255,.14), transparent 70%),
      linear-gradient(170deg, var(--brand) 0%, var(--brand-deep) 100%);
    color:#FFFFFF;
  }
  .side-brand{display:flex;align-items:center;gap:11px;}
  .side-brand img{width:40px;height:40px;border-radius:13px;display:block;object-fit:contain;background:rgba(255,255,255,.12);}
  .side-brand .side-mark{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;}
  .side-brand span{font-size:20px;font-weight:800;letter-spacing:-.01em;}
  .side-lead h1{margin:0 0 16px;font-size:38px;font-weight:800;line-height:1.12;letter-spacing:-.02em;}
  .side-lead p{margin:0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.72);max-width:420px;}

  /* Две карточки-иллюстрации: чем живёт консоль. */
  .side-cards{display:flex;flex-direction:column;gap:14px;margin-top:12px;}
  .side-card{
    width:100%;max-width:420px;
    display:flex;align-items:center;gap:12px;
    padding:15px 17px;border-radius:17px;
    background:#FFFFFF;color:var(--ink);
    transform:rotate(-1.5deg);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
  }
  .side-card.dark{
    background:rgba(0,0,0,.28);color:#FFFFFF;
    border:1px solid rgba(255,255,255,.22);
    transform:rotate(1deg);
  }
  .side-card b{display:block;font-size:15px;font-weight:800;}
  .side-card small{display:block;font-size:11px;color:var(--muted);margin-top:1px;}
  .side-card.dark small{color:#9A9C8E;}
  .side-card > div{flex:1;min-width:0;}
  .tag{
    padding:4px 11px;border-radius:99px;
    font-size:10px;font-weight:800;letter-spacing:.06em;white-space:nowrap;
  }
  .tag-brand{background:var(--brand);color:var(--on-brand);}
  .tag-red{background:rgba(198,61,61,.2);color:#FF9A8F;}
  .tag-green{background:rgba(31,138,80,.10);color:var(--green);}

  .login-main{
    flex:1;display:flex;align-items:center;justify-content:center;
    padding:48px;
    background:
      radial-gradient(520px 360px at 100% 0%, var(--brand-soft), transparent 70%),
      var(--page);
  }
}