/* ==========================================================================
   Alpha Media — account pages
   login.html, account.html, payment-result.html, plus the identity fields
   that were added to the buy panel.

   Only tokens from styles.css; no new colours.
   ========================================================================== */

/* ==========================================================================
   Shared shell
   ========================================================================== */
.acct {
  min-height: 70vh;
  padding-block: calc(var(--header-h) + var(--s-16)) var(--s-20);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(107, 47, 143, .40), transparent 70%),
    var(--purple-950);
}
.acct__inner { max-width: 460px; margin-inline: auto; }
.acct__wide  { max-width: var(--container); margin-inline: auto; }

.acard {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid rgba(240, 180, 41, .18);
  background: linear-gradient(170deg, var(--purple-850), var(--purple-950));
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  padding: var(--s-10) var(--s-8) var(--s-8);
}
.acard::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.acct__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: var(--s-2);
  text-align: center;
}
.acct__sub {
  font-size: .88rem;
  line-height: 2;
  color: var(--text-on-dark-muted);
  text-align: center;
  margin-bottom: var(--s-8);
}

/* ==========================================================================
   Fields
   ========================================================================== */
.fld { margin-bottom: var(--s-5); }
.fld > label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--purple-100);
  margin-bottom: var(--s-2);
}
.fld > label small { font-weight: 500; color: var(--text-on-dark-muted); }

.fld input,
.fld textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-dark);
  background: rgba(12, 3, 20, .55);
  color: var(--text-on-dark);
  font: inherit;
  font-size: .95rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.fld input:focus,
.fld textarea:focus {
  outline: none;
  border-color: rgba(240, 180, 41, .55);
  box-shadow: 0 0 0 3px rgba(240, 180, 41, .13);
}
.fld input[dir="ltr"] { text-align: left; letter-spacing: .05em; }

.fld .err {
  display: none;
  margin-top: var(--s-2);
  font-size: .76rem;
  color: #ff9d9d;
}
.fld.has-err input { border-color: rgba(255, 120, 120, .6); }
.fld.has-err .err  { display: block; }

/* the six-box OTP entry */
.otp-row {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  direction: ltr;
  margin-bottom: var(--s-5);
}
.otp-row input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border-dark);
  background: rgba(12, 3, 20, .6);
  color: var(--accent);
}
.otp-row input:focus {
  outline: none;
  border-color: rgba(240, 180, 41, .6);
  box-shadow: 0 0 0 3px rgba(240, 180, 41, .14);
}

.acct__btn {
  width: 100%;
  padding: var(--s-4);
  border: 0;
  border-radius: var(--r-md);
  font: inherit;
  font-size: .98rem;
  font-weight: 800;
  color: var(--purple-950);
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  box-shadow: 0 10px 26px -10px rgba(240, 180, 41, .8);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.acct__btn:hover:not(:disabled) { transform: translateY(-2px); }
.acct__btn:disabled { opacity: .55; cursor: default; transform: none; }

.acct__ghost {
  display: block;
  width: 100%;
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--purple-100);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.acct__ghost:hover {
  border-color: rgba(240, 180, 41, .4);
  color: var(--accent);
  background: rgba(107, 47, 143, .18);
}
.acct__ghost:disabled { opacity: .5; cursor: default; }

.acct__msg {
  display: none;
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: .84rem;
  line-height: 1.9;
}
.acct__msg.is-on { display: block; }
.acct__msg--err  { background: rgba(180, 40, 40, .16); border: 1px solid rgba(255, 120, 120, .35); color: #ffc9c9; }
.acct__msg--ok   { background: rgba(30, 130, 70, .16);  border: 1px solid rgba(110, 231, 168, .35); color: #b6f2d0; }

.acct__foot {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-dark);
  font-size: .82rem;
  color: var(--text-on-dark-muted);
  text-align: center;
}
.acct__foot a { color: var(--accent); font-weight: 700; }

.acct__step { display: none; }
.acct__step.is-on { display: block; }

/* ==========================================================================
   Dashboard
   ========================================================================== */
.dash__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
}
.dash__hi { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.dash__who { font-size: .84rem; color: var(--text-on-dark-muted); margin-top: var(--s-1); }

.dash__nag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-8);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  border: 1px dashed rgba(240, 180, 41, .4);
  background: rgba(240, 180, 41, .07);
  font-size: .88rem;
  line-height: 1.9;
  color: var(--text-on-dark);
}

.lib {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-5);
}
.lib__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border-dark);
  background: rgba(21, 5, 32, .5);
}
.lib__title { font-size: 1.02rem; font-weight: 800; color: var(--text-on-dark); }
.lib__meta  { font-size: .78rem; color: var(--text-on-dark-muted); line-height: 1.9; }
.lib__tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: .68rem;
  font-weight: 700;
  background: rgba(107, 47, 143, .4);
  color: var(--purple-100);
}
.lib__tag--gift { background: rgba(240, 180, 41, .18); color: var(--accent); }

/* The note the buyer wrote. Set apart rather than folded into the meta line:
   it is the one line on this card a person actually wrote to another person. */
.lib__note {
  margin: var(--s-2) 0 0;
  padding-inline-start: var(--s-3);
  border-inline-start: 2px solid rgba(240, 180, 41, .5);
  font-size: .82rem;
  line-height: 1.9;
  color: var(--purple-100);
}

.lib__dl { margin-top: auto; }

.dash__empty {
  padding: var(--s-12);
  text-align: center;
  border: 1px dashed var(--border-dark);
  border-radius: var(--r-md);
  color: var(--text-on-dark-muted);
  line-height: 2.1;
}

.otable { width: 100%; border-collapse: collapse; font-size: .84rem; }
.otable th, .otable td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-dark);
  text-align: right;
  white-space: nowrap;
}
.otable th { color: var(--purple-100); font-weight: 700; font-size: .78rem; }
.otable td { color: var(--text-on-dark-muted); }
.otable td:first-child { color: var(--text-on-dark); font-weight: 700; direction: ltr; text-align: right; }
.ostat { padding: 2px 9px; border-radius: var(--r-full); font-size: .7rem; font-weight: 700; }
.ostat--paid    { background: rgba(30, 130, 70, .22);  color: #8fe3b4; }
.ostat--pending { background: rgba(240, 180, 41, .18); color: var(--accent); }
.ostat--failed  { background: rgba(180, 40, 40, .2);   color: #ff9d9d; }

.dash__scroll { overflow-x: auto; }

/* ==========================================================================
   Payment result
   ========================================================================== */
.pres { text-align: center; }
.pres__ico {
  width: 78px; height: 78px;
  margin: 0 auto var(--s-6);
  display: grid; place-items: center;
  border-radius: var(--r-full);
}
.pres__ico svg { width: 34px; height: 34px; fill: currentColor; }
.pres--ok .pres__ico     { color: #6ee7a8; background: rgba(110, 231, 168, .12); box-shadow: 0 0 0 1px rgba(110, 231, 168, .3), 0 0 40px -8px rgba(110, 231, 168, .5); }
.pres--failed .pres__ico { color: #ff9d9d; background: rgba(255, 120, 120, .1);  box-shadow: 0 0 0 1px rgba(255, 120, 120, .28); }
.pres--review .pres__ico { color: var(--accent); background: rgba(240, 180, 41, .1); box-shadow: 0 0 0 1px rgba(240, 180, 41, .3); }

.pres__ref {
  display: inline-block;
  margin: var(--s-4) 0 var(--s-6);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-full);
  border: 1px dashed rgba(240, 180, 41, .35);
  font-weight: 800;
  color: var(--accent);
  direction: ltr;
  letter-spacing: .08em;
}

/* ==========================================================================
   Identity fields inside the buy panel
   ========================================================================== */
.buy__who {
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border-dark);
}
/* /api/me said we are signed in — the account already has all of this. */
.buy__who.is-signed .buy__field,
.buy__who.is-signed .buy__who-head { display: none; }
.buy__who.is-signed { padding-bottom: 0; border-bottom: 0; }

.buy__who-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: .84rem;
  font-weight: 700;
  color: var(--purple-100);
}
.buy__signin { font-size: .78rem; font-weight: 600; color: var(--accent); }
.buy__signin:hover { text-decoration: underline; }

.buy__who-note {
  font-size: .8rem;
  color: var(--text-on-dark-muted);
  line-height: 1.9;
}

.buy__error {
  display: none;
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: rgba(180, 40, 40, .16);
  border: 1px solid rgba(255, 120, 120, .35);
  color: #ffc9c9;
  font-size: .82rem;
  line-height: 1.9;
}
.buy__error.is-on { display: block; }

@media (max-width: 560px) {
  .acard { padding: var(--s-8) var(--s-5) var(--s-6); }
  .otp-row input { width: 42px; height: 50px; font-size: 1.2rem; }
  .dash__head { flex-direction: column; align-items: flex-start; }
}