/* ═══════════════════════════════════════════════════════════════
   AUTH — общие стили + .signup-page + .signin-page
   ═══════════════════════════════════════════════════════════════ */

/* ── Враппер ─────────────────────────────────────────────────────────────── */
.auth-wrap {
   display: flex;
   min-height: calc(100vh - 60px);
}

/* ── Левая колонка ───────────────────────────────────────────────────────── */
.auth-left {
   width: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 48px 40px;
   background: #fff;
}

.auth-box {
   width: 100%;
   max-width: 400px;
}

/* ── Заголовок ───────────────────────────────────────────────────────────── */
.auth-title {
   font-size: 26px;
   font-weight: 700;
   letter-spacing: -0.6px;
   color: #0a0a0a;
   margin-bottom: 4px;
   line-height: 1.2;
}

.auth-sub {
   font-size: 13px;
   color: #aaa;
   margin-bottom: 28px;
}

/* ── Поля ────────────────────────────────────────────────────────────────── */
.auth-field {
   display: flex;
   flex-direction: column;
   gap: 5px;
   margin-bottom: 12px;
}

.auth-field label {
   font-size: 11px;
   font-weight: 600;
   color: #999;
   text-transform: uppercase;
   letter-spacing: 0.6px;
}

.auth-field input,
.auth-field .iti input {
   border: 1.5px solid #eee;
   border-radius: 10px;
   padding: 14px 16px;
   font-size: 15px;
   color: #111;
   background: #f9f9f9;
   outline: none;
   transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
   width: 100%;
   box-sizing: border-box;
}

.auth-field input:focus {
   border-color: #111;
   background: #fff;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.auth-field input::placeholder {
   color: #ccc;
}

/* intl-tel-input */
.auth-field .iti {
   width: 100%;
}

/* ── Прогрессивные поля ──────────────────────────────────────────────────── */
.auth-field.hidden,
#form-actions.hidden {
   display: none;
}

.field-appear {
   animation: fieldSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fieldSlideIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ── Хинты username ──────────────────────────────────────────────────────── */
.auth-field-hint {
   font-size: 12px;
   min-height: 15px;
}

.auth-field-hint.ok  { color: #16a34a; }
.auth-field-hint.err { color: #dc2626; }

/* ── Ошибка ──────────────────────────────────────────────────────────────── */
.auth-error {
   display: flex;
   align-items: center;
   gap: 8px;
   background: #fef2f2;
   border: 1px solid #fecaca;
   color: #dc2626;
   border-radius: 10px;
   padding: 9px 12px;
   font-size: 13px;
   margin-bottom: 16px;
}

.auth-error::before {
   content: '!';
   width: 16px;
   height: 16px;
   min-width: 16px;
   border-radius: 50%;
   background: #dc2626;
   color: #fff;
   font-size: 10px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ── Кнопка primary ──────────────────────────────────────────────────────── */
.auth-btn-primary {
   width: 100%;
   background: #111;
   color: #fff;
   border: none;
   border-radius: 12px;
   padding: 13px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   margin-top: 4px;
   letter-spacing: -0.2px;
   transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

.auth-btn-primary:hover {
   background: #222;
   box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}

.auth-btn-primary:active {
   transform: scale(0.99);
}

.auth-btn-primary:disabled {
   opacity: 0.55;
   cursor: not-allowed;
}

/* ── Ghost кнопка (back) ─────────────────────────────────────────────────── */
.auth-btn-ghost {
   width: 100%;
   padding: 11px;
   background: transparent;
   border: 1.5px solid #eee;
   border-radius: 12px;
   cursor: pointer;
   font-size: 14px;
   color: #888;
   margin-top: 8px;
   transition: border-color 0.15s, color 0.15s;
   display: block;
}

.auth-btn-ghost:hover {
   border-color: #ccc;
   color: #333;
}

/* ── Разделитель ─────────────────────────────────────────────────────────── */
.auth-divider {
   text-align: center;
   color: #ccc;
   font-size: 11px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin: 18px 0;
   position: relative;
}

.auth-divider::before,
.auth-divider::after {
   content: '';
   position: absolute;
   top: 50%;
   width: calc(50% - 22px);
   height: 1px;
   background: #eee;
}

.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }

/* ── Google кнопка ───────────────────────────────────────────────────────── */
.auth-btn-google {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   width: 100%;
   padding: 12px;
   border: 1.5px solid #eee;
   border-radius: 12px;
   background: #fff;
   font-size: 14px;
   font-weight: 500;
   color: #111;
   text-decoration: none;
   transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-btn-google:hover {
   border-color: #ccc;
   box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* ── Код верификации ─────────────────────────────────────────────────────── */
.code-input {
   font-size: 24px !important;
   font-weight: 700 !important;
   letter-spacing: 8px !important;
   text-align: center !important;
   padding: 14px !important;
}

.auth-hint {
   font-size: 14px;
   color: #666;
   margin-bottom: 20px;
   line-height: 1.5;
}

.auth-hint strong {
   color: #111;
   font-weight: 600;
}

/* ── Switch ──────────────────────────────────────────────────────────────── */
.auth-switch {
   text-align: center;
   font-size: 13px;
   color: #aaa;
   margin-top: 24px;
}

.auth-switch a {
   color: #111;
   font-weight: 600;
   text-decoration: none;
}

.auth-switch a:hover {
   text-decoration: underline;
}

/* ── Правая колонка ──────────────────────────────────────────────────────── */
.auth-right {
   width: 50%;
   position: relative;
   overflow: hidden;
   background: #0c0f1a;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Градиентные пятна */
.auth-right::before {
   content: '';
   position: absolute;
   inset: 0;
   background:
           radial-gradient(ellipse 70% 55% at 25% 45%, rgba(59, 91, 219, 0.3) 0%, transparent 60%),
           radial-gradient(ellipse 55% 45% at 78% 65%, rgba(139, 92, 246, 0.18) 0%, transparent 55%),
           radial-gradient(ellipse 40% 35% at 55% 18%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
   animation: bgPulse 9s ease-in-out infinite alternate;
}

@keyframes bgPulse {
   0%   { opacity: 1;   transform: scale(1); }
   100% { opacity: 0.7; transform: scale(1.06); }
}

/* Точечная сетка */
.auth-right::after {
   content: '';
   position: absolute;
   inset: 0;
   background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
   background-size: 30px 30px;
}

.auth-right-inner {
   position: relative;
   z-index: 1;
   padding: 40px;
   text-align: left;
}

.auth-right-headline {
   font-size: 52px;
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -2px;
   color: #fff;
   margin-bottom: 16px;
}

.auth-right-sub {
   font-size: 15px;
   color: rgba(255,255,255,0.4);
   letter-spacing: 0.2px;
}

/* ── Form (signin) ───────────────────────────────────────────────────────── */
.auth-form {
   display: flex;
   flex-direction: column;
}

/* ── Адаптив ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
   .auth-right  { display: none; }
   .auth-left   { width: 100%; padding: 28px 20px; }
   .auth-box    { max-width: 100%; }
}