/* PowerBoxDJ — account pages.
   Only the pieces the static site does not already have. Everything else (colours, type scale,
   .btn, .wrap) comes from style.css, so these pages inherit the site theme rather than restating it. */

.auth-main {
  position: relative; z-index: 1;
  min-height: 68vh;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 62px 24px 90px;
}

.auth-card {
  width: 100%; max-width: 430px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 30px 32px 26px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
}
.auth-card.wide { max-width: 760px; }

.auth-card h1 {
  font-size: 1.62rem; font-weight: 780; letter-spacing: -.025em;
  margin: 0 0 6px; color: var(--text);
}
.auth-card h1 em { color: var(--gold); font-style: normal; }
.auth-sub { font-size: .92rem; color: var(--text-2); margin: 0 0 20px; line-height: 1.55; }

.auth-card label {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: var(--text-3);
  margin: 16px 0 6px;
}
.auth-card input[type=email],
.auth-card input[type=password],
.auth-card input[type=text] {
  width: 100%; padding: 10px 12px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 0;
  font: inherit; font-size: .95rem;
  transition: border-color .14s, box-shadow .14s;
}
.auth-card input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 201, 0, .13);
}
.auth-card input::placeholder { color: var(--text-3); }

.auth-card button[type=submit] {
  width: 100%; margin-top: 24px; padding: 11px 16px;
  background: var(--gold); color: #1a1a1a;
  border: 0; border-radius: 0;
  font: inherit; font-size: .97rem; font-weight: 700;
  cursor: pointer; transition: background .14s, transform .06s;
}
.auth-card button[type=submit]:hover { background: var(--gold-pale); }
.auth-card button[type=submit]:active { transform: translateY(1px); }
.auth-card button[type=submit][disabled] { background: var(--line); color: var(--text-3); cursor: not-allowed; }

.auth-msg {
  font-size: .88rem; line-height: 1.55;
  padding: 11px 13px; border-radius: 0;
  margin: 0 0 16px; border: 1px solid;
}
.auth-msg code { font-family: var(--mono); font-size: .85em; color: var(--gold-pale); }
.auth-msg.err  { background: rgba(208, 42, 42, .12); border-color: rgba(208, 42, 42, .45); color: #ffc9c9; }
.auth-msg.ok   { background: rgba(58, 168, 63, .12); border-color: rgba(58, 168, 63, .45); color: #c6e9c8; }
.auth-msg.note { background: rgba(47, 191, 191, .10); border-color: rgba(47, 191, 191, .38); color: #bfe9e9; }

.auth-foot {
  margin: 20px 0 0; padding-top: 17px;
  border-top: 1px solid var(--line-soft);
  font-size: .85rem; color: var(--text-3); line-height: 1.75;
}
.auth-foot a { color: var(--gold); }
.auth-foot a:hover { color: var(--gold-pale); }

/* ── tier badge ─────────────────────────────── */
.tier {
  display: inline-block; vertical-align: middle;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 0; border: 1px solid;
  white-space: nowrap;
}
.tier-free { color: var(--text-3);  border-color: var(--line);              background: rgba(255, 255, 255, .03); }
.tier-paid { color: var(--gold);    border-color: rgba(255, 201, 0, .45);   background: rgba(255, 201, 0, .10); }
.tier-inf  { color: #1a1a1a;        border-color: var(--gold);              background: var(--gold); }

/* ── account page ───────────────────────────── */
.acct-rows { margin: 4px 0 0; border-top: 1px solid var(--line-soft); }
.acct-row {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
}
.acct-row .k { font-size: .78rem; letter-spacing: .03em; color: var(--text-3); min-width: 132px; }
.acct-row .v { font-size: .95rem; color: var(--text); }
.acct-row .v.dim { color: var(--text-2); }
.acct-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ── header account chip (filled in by nav.js) ── */
.pb-acct {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 600; color: var(--text-2);
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 0;
  transition: border-color .14s, color .14s;
}
.pb-acct:hover { color: var(--text); border-color: var(--gold-dim); }
.pb-acct .tier { font-size: .64rem; padding: 2px 7px; }

@media (max-width: 560px) {
  .auth-main { padding: 34px 16px 64px; }
  .auth-card { padding: 24px 20px 22px; border-radius: 0; }
  .acct-row .k { min-width: 0; flex: 1 0 100%; }
}