/* --- SAFETY RESET: показываем/скрываем по aria-hidden и центрируем --- */

.auth-overlay{
  position: fixed; inset: 0; z-index: 9998;
  background: var(--auth-overlay, rgba(10,16,24,.14));
  display: none;
}
.auth-overlay[aria-hidden="false"]{ display: block; }

.auth-modal{
  display: none;
  position: fixed; z-index: 9999;
  left: 50%; top: 12%; transform: translateX(-50%);
  min-width: 340px; max-width: min(520px, 92vw);
  background: var(--auth-surface, #1b2430);
  color: var(--auth-text, #e6edf3);
  border: 1px solid var(--auth-line, rgba(255,255,255,.06));
  border-radius: 12px;
  box-shadow: var(--auth-shadow, 0 12px 30px rgba(0,0,0,.28));
  padding: 16px 16px 12px;
}
.auth-modal[aria-hidden="false"]{ display: block; }
/* ===== Login modal — flat dark like collector ===== */

/* палитра под твой скрин */
:root{
  --auth-bg:      #141c27;                /* фон модалки */
  --auth-text:    #e6edf3;                /* текст основной */
  --auth-muted:   #99a9be;                /* подписи */
  --auth-line:    rgba(255,255,255,.08);  /* разделители/рамка */
  --auth-ovl:     rgba(10,16,24,.14);     /* подложка */
  --auth-blue:    #2563eb;                /* primary */
  --auth-blue-b:  #1d4ed8;
  --auth-shadow:  0 16px 40px rgba(0,0,0,.32);
  --auth-radius:  10px;
}

/* подложка чуть светлая, без блюра */
.auth-overlay{
  background: var(--auth-ovl);
  backdrop-filter: none;
}

/* коробка модалки — плоская, без зума/эффектов */
.auth-modal{
  left: 50%; top: 12%; transform: translateX(-50%);
  min-width: 360px; max-width: min(560px, 92vw);
  background: var(--auth-bg);
  color: var(--auth-text);
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius);
  box-shadow: var(--auth-shadow);
  padding: 14px 16px 12px;
}

/* шапка — линия снизу, крестик в «пилюле» */
.auth-header{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--auth-line);
}
.auth-title{ font-weight: 650; font-size: 16px; }
.auth-close{
  border: 1px solid var(--auth-line);
  background: transparent; color: inherit; cursor: pointer;
  padding: 4px 8px; border-radius: 8px; line-height: 1; font-size: 18px;
}
.auth-close:hover{ background: rgba(255,255,255,.05); }

/* переключатель режимов — спокойный серый */
.auth-mode{ color: var(--auth-muted); font-size: 14px; margin: 6px 0 4px; }
.auth-mode label{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }

/* поля — сетка с лейблом слева, тонкие разделители */
.auth-field{
  display:grid; grid-template-columns: 150px 1fr; gap: 10px; align-items:center;
  padding: 10px 0;
  border-bottom: 1px solid var(--auth-line);
}
.auth-field:last-child{ border-bottom: 0; }
.auth-field label{ color: var(--auth-muted); font-size: 13.5px; }
.auth-field input{
  width: 100%; color: var(--auth-text);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--auth-line);
  border-radius: 8px; padding: 8px 11px;
  outline: none; transition: border-color .12s ease, box-shadow .12s ease;
}
.auth-field input::placeholder{ color: var(--auth-muted); }
.auth-field input:focus{
  border-color: var(--auth-blue-b);
  box-shadow: 0 0 0 2px rgba(37,99,235,.25);
}

/* подпись в режиме SMS */
.auth-note{ color: var(--auth-muted); margin-top: 4px; }

/* кнопки — как на скрине: серый и синий */
.auth-actions{ display:flex; gap: 10px; justify-content:flex-end; margin-top: 14px; }
.auth-btn{
  padding: 9px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--auth-line);
  background: rgba(255,255,255,.03); color: var(--auth-text);
  transition: background-color .12s ease, border-color .12s ease, transform .03s ease;
}
.auth-btn:hover{ background: rgba(255,255,255,.05); }
.auth-btn:active{ transform: translateY(1px); }
.auth-btn.primary{
  background: var(--auth-blue);
  border-color: var(--auth-blue-b);
  color: #fff;
}

/* мобила — лейбл сверху */
@media (max-width: 560px){
  .auth-field{ grid-template-columns: 1fr; }
  .auth-field label{ margin-bottom: 4px; }
}