/* ===== ATLAS AI — auth.css: login/signup modal, account button ===== */

/* ---- Account button (sidebar footer) ---- */
#btnAccount .avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: 0 0 22px;
  background: var(--bg-hover, rgba(148,163,184,.15));
  color: var(--text-dim, #94a3b8);
  overflow: hidden;
}
#btnAccount .avatar.logged {
  background: linear-gradient(135deg, var(--accent, #06b6d4), #6366f1);
  color: #fff;
}
#btnAccount span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar.big {
  width: 52px; height: 52px; font-size: 22px; margin: 0 auto 10px;
  background: linear-gradient(135deg, var(--accent, #06b6d4), #6366f1);
  color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Auth modal ---- */
.auth-wrap { display: flex; flex-direction: column; gap: 10px; padding: 2px 0; }

.auth-provider {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(148,163,184,.08);
  color: var(--text, #f1f5f9); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .15s, transform .1s;
}
.auth-provider:hover { background: rgba(148,163,184,.16); }
.auth-provider:active { transform: scale(.985); }
.auth-provider.apple { background: #000; border-color: #000; color: #fff; }
.auth-provider.apple:hover { background: #1a1a1a; }

.auth-divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-dim, #94a3b8); font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(148,163,184,.2);
}

.auth-input {
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(148,163,184,.08);
  color: var(--text, #f1f5f9); font-size: 14px; outline: none;
  transition: border-color .15s;
}
.auth-input:focus { border-color: var(--accent, #06b6d4); }
.auth-input::placeholder { color: var(--text-dim, #94a3b8); }

.auth-error {
  background: rgba(248,113,113,.12); color: #f87171;
  border: 1px solid rgba(248,113,113,.3);
  border-radius: 8px; padding: 9px 12px; font-size: 13px;
}

.auth-submit {
  width: 100%; padding: 11px; border: none; border-radius: 10px;
  background: var(--accent, #06b6d4); color: #04121f;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: filter .15s, transform .1s;
}
.auth-submit:hover { filter: brightness(1.1); }
.auth-submit:active { transform: scale(.985); }

.auth-switch {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; color: var(--text-dim, #94a3b8);
}
.auth-switch button, .auth-forgot {
  background: none; border: none; padding: 0;
  color: var(--accent, #06b6d4); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: center;
}

/* ---- Account menu ---- */
.auth-account { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.auth-name { font-size: 16px; font-weight: 700; color: var(--text, #f1f5f9); }
.auth-email { font-size: 13px; color: var(--text-dim, #94a3b8); word-break: break-all; }
.auth-sync { font-size: 12px; color: var(--text-dim, #94a3b8); margin-bottom: 6px; }