/* Eri Tech — auth.css (Fase 2): login/cadastro + sync. Alinhado aos tokens do tema. */

/* ── Chip de autenticação (no rail) ── */
#eri-auth { margin-top: 10px; }
#eri-auth .auth-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 12px; border: 1px solid var(--amber-wire); background: var(--amber-dim);
  color: var(--amber); font: 600 12.5px/1 'Outfit', system-ui, sans-serif; letter-spacing: .02em;
  border-radius: var(--r2); cursor: pointer; transition: background var(--fast) var(--ease);
}
#eri-auth .auth-btn:hover { background: var(--amber-glow); }
#eri-auth .auth-user {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border: 1px solid var(--wire-2); background: var(--ink-3); border-radius: var(--r2);
}
#eri-auth .auth-avatar {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--amber);
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 'Outfit', sans-serif;
}
#eri-auth .auth-meta { min-width: 0; flex: 1; }
#eri-auth .auth-name { font: 600 12px/1.2 'Outfit', sans-serif; color: var(--chalk);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#eri-auth .auth-sub { font: 500 10.5px/1.2 'DM Mono', monospace; color: var(--chalk-3);
  display: flex; align-items: center; gap: 6px; margin-top: 2px; }
#eri-auth .plan-badge { padding: 1px 6px; border-radius: 99px; font-weight: 600; letter-spacing: .05em; }
#eri-auth .plan-free { background: var(--ink-5); color: var(--chalk-2); }
#eri-auth .plan-pro { background: var(--amber); color: var(--ink); }
#eri-auth .auth-logout { background: none; border: none; color: var(--chalk-3); cursor: pointer;
  font: 500 11px/1 'Outfit', sans-serif; padding: 2px; }
#eri-auth .auth-logout:hover { color: var(--stop); }
#eri-auth .sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chalk-4); flex: 0 0 7px; }
#eri-auth .sync-dot.ok { background: var(--go); }
#eri-auth .sync-dot.busy { background: var(--wait); animation: eri-pulse 1s infinite; }
#eri-auth .sync-dot.err { background: var(--stop); }
@keyframes eri-pulse { 50% { opacity: .3; } }

/* ── Modal de login/cadastro ── */
#auth-modal { position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 20px; }
#auth-modal.open { display: flex; }
#auth-modal .auth-ov { position: absolute; inset: 0; background: rgba(0,0,0,.66); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#auth-modal .auth-card {
  position: relative; width: 100%; max-width: 380px; background: var(--ink-2);
  border: 1px solid var(--wire-2); border-radius: var(--r4); padding: 26px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
#auth-modal h3 { font: 700 18px/1.2 'Outfit', sans-serif; color: var(--chalk); margin: 0 0 4px; }
#auth-modal .auth-tag { font: 400 12.5px/1.4 'DM Mono', monospace; color: var(--chalk-3); margin: 0 0 18px; }
#auth-modal .auth-tabs { display: flex; gap: 4px; background: var(--ink-3); padding: 3px;
  border-radius: var(--r2); margin-bottom: 8px; }
#auth-modal .auth-tab { flex: 1; padding: 8px; border: none; background: none; color: var(--chalk-3);
  font: 600 12px/1 'Outfit', sans-serif; border-radius: var(--r1); cursor: pointer; }
#auth-modal .auth-tab.on { background: var(--ink-5); color: var(--chalk); }
#auth-modal label { display: block; font: 600 11px/1 'Outfit', sans-serif; color: var(--chalk-2);
  letter-spacing: .04em; text-transform: uppercase; margin: 14px 0 6px; }
#auth-modal input { width: 100%; padding: 10px 12px; background: var(--ink-3);
  border: 1px solid var(--wire-2); border-radius: var(--r2); color: var(--chalk);
  font: 400 14px/1 'DM Mono', monospace; }
#auth-modal input:focus { outline: none; border-color: var(--amber-wire); }
#auth-modal .auth-submit { width: 100%; margin-top: 20px; padding: 12px; background: var(--amber);
  color: var(--ink); border: none; border-radius: var(--r2); font: 700 13px/1 'Outfit', sans-serif; cursor: pointer; }
#auth-modal .auth-submit:disabled { opacity: .55; cursor: default; }
#auth-modal .auth-msg { margin-top: 14px; font: 500 12px/1.4 'DM Mono', monospace; min-height: 16px; }
#auth-modal .auth-msg.err { color: var(--stop); }
#auth-modal .auth-msg.ok { color: var(--go); }
#auth-modal .auth-x { position: absolute; top: 14px; right: 14px; background: none; border: none;
  color: var(--chalk-3); font-size: 20px; line-height: 1; cursor: pointer; }
#auth-modal .auth-x:hover { color: var(--chalk); }
#auth-modal .name-row { display: none; }
#auth-modal.signup .name-row { display: block; }

/* ── Botão "Assinar Pro" (Fase 3) ── */
#eri-auth .auth-user { flex-wrap: wrap; }
#eri-auth .auth-upgrade {
  flex: 1 0 100%; margin-top: 9px; padding: 8px; border: none; border-radius: var(--r2);
  background: var(--amber); color: var(--ink); font: 700 11.5px/1 'Outfit', system-ui, sans-serif; cursor: pointer;
}
#eri-auth .auth-upgrade:hover { filter: brightness(1.08); }