/* =====================================================================
   PIXEL FORGE — Fase 2: autenticação + área de cliente
   ===================================================================== */

/* ---- Faixa flash (avisos) -------------------------------------------- */
.flash-wrap { position: sticky; top: 64px; z-index: 900; }
.flash {
  max-width: 1140px; margin: .6rem auto; padding: .8rem 1.1rem;
  border-radius: 10px; font-size: .92rem; font-weight: 500;
  display: flex; align-items: center; gap: .6rem;
}
.flash::before { font-family: var(--font-mono); font-weight: 700; }
.flash-success { background: #e7f8f0; color: #0c6b46; border: 1px solid #bde6d4; }
.flash-success::before { content: "✓"; }
.flash-error   { background: #fdecea; color: #a32414; border: 1px solid #f6c9c1; }
.flash-error::before { content: "!"; }
.flash-info    { background: #ecebfb; color: #2f259c; border: 1px solid #d2cef6; }
.flash-info::before { content: "i"; }

/* ---- Ecrã de autenticação -------------------------------------------- */
.auth-screen {
  min-height: calc(100vh - 70px);
  display: flex; align-items: center;
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(75,59,255,.10), transparent 60%),
    var(--paper);
  padding: 3rem 0;
}
.auth-card {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 2.4rem;
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
}
.auth-card h1 { font-size: 1.7rem; margin-bottom: .3rem; }
.auth-sub { color: var(--text-soft); margin-bottom: 1.6rem; font-size: .95rem; }

.field { margin-bottom: 1.05rem; }
.field label {
  display: block; font-size: .82rem; font-weight: 600;
  margin-bottom: .35rem; color: var(--text);
}
.field input {
  width: 100%; padding: .72rem .9rem;
  border: 1px solid var(--paper-2); border-radius: 10px;
  font-family: var(--font-body); font-size: .95rem; background: #fdfcfa;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(75,59,255,.12);
}
.field .hint { font-size: .76rem; color: var(--text-soft); margin-top: .3rem; }

.auth-actions { margin-top: 1.4rem; }
.auth-actions .btn-accent { width: 100%; padding: .8rem; }
.auth-foot {
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--paper-2);
  font-size: .9rem; color: var(--text-soft); text-align: center;
}
.auth-foot a { color: var(--accent); font-weight: 600; }
.auth-meta { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; }
.auth-meta a { color: var(--accent); }

/* Caixa de aviso de dev (mostra o link de verificação em local) */
.dev-note {
  margin-top: 1.4rem; padding: 1rem; border-radius: 10px;
  background: #13131c; color: #cfcde0;
  font-family: var(--font-mono); font-size: .8rem; word-break: break-all;
}
.dev-note b { color: var(--mint); display: block; margin-bottom: .4rem; }
.dev-note a { color: #8aa0ff; }

/* ---- Área de cliente -------------------------------------------------- */
.account-wrap { padding: 2.6rem 0 4rem; min-height: 70vh; }
.account-head { margin-bottom: 2rem; }
.account-head .eyebrow { margin-bottom: .5rem; }
.account-grid { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; }

.account-nav {
  background: #fff; border: 1px solid var(--paper-2);
  border-radius: 14px; padding: .8rem; position: sticky; top: 90px;
}
.account-nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .85rem; border-radius: 9px;
  color: var(--text-soft); font-weight: 500; font-size: .94rem;
}
.account-nav a:hover { background: var(--paper); color: var(--text); }
.account-nav a.active { background: var(--ink); color: #fff; }
.account-nav a.danger { color: #a32414; }
.account-nav .nav-tag {
  margin-left: auto; font-family: var(--font-mono);
  font-size: .62rem; background: var(--paper-2); color: var(--text-soft);
  padding: .1rem .4rem; border-radius: 5px;
}

.panel {
  background: #fff; border: 1px solid var(--paper-2);
  border-radius: 14px; padding: 1.8rem;
}
.panel + .panel { margin-top: 1.4rem; }
.panel h2 { font-size: 1.25rem; margin-bottom: 1.1rem; }
.panel h2.with-sub { margin-bottom: .2rem; }
.panel .panel-sub { color: var(--text-soft); font-size: .9rem; margin-bottom: 1.2rem; }

.data-row { display: flex; justify-content: space-between; padding: .7rem 0; border-bottom: 1px solid var(--paper-2); }
.data-row:last-child { border-bottom: none; }
.data-row .k { color: var(--text-soft); font-size: .9rem; }
.data-row .v { font-weight: 600; }

.empty-state {
  text-align: center; padding: 2.4rem 1rem; color: var(--text-soft);
  border: 1px dashed var(--paper-2); border-radius: 12px;
}
.empty-state .glyph { font-family: var(--font-disp); font-size: 2rem; color: var(--accent); opacity: .5; }
.badge-soon {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em;
  background: var(--paper-2); color: var(--text-soft);
  padding: .2rem .5rem; border-radius: 6px; text-transform: uppercase;
}

@media (max-width: 767px) {
  .account-grid { grid-template-columns: 1fr; }
  .account-nav { position: static; display: flex; flex-wrap: wrap; gap: .3rem; }
  .account-nav a { flex: 1 1 auto; }
}