/* Общая страница */
:root{
    --wb-bg: #f7f6fb;
    --wb-card: #ffffff;
    --wb-accent: #6c1fa6; /* фирменный пурпур */
    --wb-accent-dark: #54147d;
    --wb-muted: #6b6b6b;
    --wb-danger: #e85a5a;
    --wb-radius: 12px;
    --wb-shadow: 0 8px 30px rgba(33,12,61,0.08);
    --wb-font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  }
  
  html,body{
    height:100%;
    margin:0;
    font-family:var(--wb-font-sans);
    background:linear-gradient(180deg, #fff 0%, var(--wb-bg) 100%);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color:#222;
  }
  
  /* Контейнер и карточка */
  #page-container{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 16px;
    box-sizing:border-box;
  }
  
  .login{
    width:100%;
    max-width:420px;
    background:var(--wb-card);
    border-radius:var(--wb-radius);
    box-shadow:var(--wb-shadow);
    overflow:hidden;
    border:1px solid rgba(100,30,120,0.06);
  }
  
  /* Шапка карточки */
  .login-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 22px;
    background:linear-gradient(90deg,var(--wb-accent),var(--wb-accent-dark));
    color:#fff;
    font-weight:700;
    font-size:16px;
  }
  .login-brand img{ display:block; }
  
  /* Контент */
  .login-content{
    padding:28px 26px 32px;
  }
  .login-heading{
    margin:0 0 6px;
    font-size:20px;
    font-weight:700;
    color:#24142b;
    text-align:center;
  }
  .login-subheading{
    margin:0 0 18px;
    font-size:13px;
    color:var(--wb-muted);
    text-align:center;
  }
  
  /* Формы */
  .form-group{ margin-bottom:14px; }
  .visually-hidden{
    position:absolute !important;
    height:1px;width:1px;
    overflow:hidden;clip:rect(1px,1px,1px,1px);
    white-space:nowrap;border:0;padding:0;margin:-1px;
  }
  
  /* Поля ввода */
  .form-control{
    width:100%;
    box-sizing:border-box;
    padding:14px 14px;
    border-radius:10px;
    border:1px solid rgba(36,20,43,0.08);
    background:#faf8ff;
    color:#24142b;
    font-size:15px;
    outline:0;
    transition:box-shadow .15s, border-color .15s, transform .08s;
  }
  .form-control::placeholder{ color:rgba(36,20,43,0.35); font-size:14px; }
  .form-control:focus{
    border-color:rgba(108,31,166,0.9);
    box-shadow:0 4px 18px rgba(108,31,166,0.12);
    transform:translateY(-1px);
  }
  
  /* Обёртка пароля с кнопкой показать */
  .password-wrap{ position:relative; }
  .btn-toggle{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    background:transparent;
    border:0;
    color:var(--wb-accent-dark);
    font-weight:600;
    padding:6px 8px;
    cursor:pointer;
    border-radius:8px;
  }
  .btn-toggle:focus{ outline:2px solid rgba(108,31,166,0.12); }
  
  /* Строка вспомогательных ссылок */
  .form-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:6px 0 18px;
    font-size:14px;
  }
  .remember{ display:flex; align-items:center; gap:8px; color:var(--wb-muted); font-size:14px; }
  .remember input{ width:16px; height:16px; accent-color:var(--wb-accent); }
  
  /* Ссылки */
  .link-forgot, .brand-title, .register-note a{
    color:var(--wb-accent-dark);
    text-decoration:none;
    font-weight:600;
  }
  .link-forgot:hover, .register-note a:hover{ text-decoration:underline; }
  
  /* Сообщения сервера и ошибки */
  .form-messages .alert{ margin:0 0 12px 0; padding:10px 12px; border-radius:8px; background:#fff5f5; color:var(--wb-danger); border:1px solid rgba(232,90,90,0.12); font-weight:600; font-size:14px; }
  .form-error{ color:var(--wb-danger); font-size:13px; margin-top:6px; min-height:18px; }
  
  /* Кнопки */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    cursor:pointer;
    padding:12px 14px;
    border-radius:10px;
    font-size:15px;
    font-weight:700;
  }
  .btn-block{ width:100%; }
  
  .btn-lime{
    background:linear-gradient(180deg,#ff7df0,#ff6ae0);
    color:#fff;
    box-shadow:0 8px 20px rgba(108,31,166,0.12);
  }
  .btn-lime:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(108,31,166,0.14); }
  
  .btn-primary{
    background:var(--wb-accent);
    color:#fff;
    box-shadow:0 8px 20px rgba(108,31,166,0.12);
  }
  
  /* Дивидер */
  .divider{
    text-align:center;
    margin:18px 0 12px;
    color:var(--wb-muted);
    font-size:13px;
    position:relative;
  }
  .divider::before, .divider::after{
    content:"";
    height:1px;
    background:rgba(36,20,43,0.06);
    position:absolute;
    top:50%;
    width:36%;
  }
  .divider::before{ left:4%; }
  .divider::after{ right:4%; }
  
  /* Социальные кнопки */
  .social-login{ display:flex; gap:10px; justify-content:center; margin-bottom:12px; }
  .btn-social{
    padding:10px 12px;
    border-radius:10px;
    font-weight:700;
    min-width:120px;
    color:#fff;
  }
  .btn-vk{ background:#4a76a8; }
  .btn-google{ background:#db4437; }
  
  /* Нотис про регистрацию */
  .register-note{ margin:10px 0 0; font-size:14px; color:var(--wb-muted); text-align:center; }
  
  /* Адаптив */
  @media (max-width:480px){
    .login{ border-radius:10px; padding:0; margin:0 6px; }
    .login-content{ padding:20px; }
    .form-control{ padding:12px; }
    .btn{ padding:11px 12px; font-size:14px; }
  }