/* Auth and account pages — the parts inner.css does not cover. */

.auth__intro .accent { color: var(--color-gold); }
.auth__fan { display: flex; margin-top: 30px; padding-left: 12px; }
.auth__fan img { width: 104px; height: 104px; border-radius: var(--radius-md); border: 1px solid var(--hair-2); box-shadow: var(--shadow-3); margin-left: -16px; transition: transform .5s var(--ease-out); }
.auth__fan img:nth-child(odd) { transform: rotate(-5deg); }
.auth__fan img:nth-child(even) { transform: rotate(4deg) translateY(-6px); }
.auth__fan:hover img { transform: translateY(-8px); }
.auth-card .notice p { margin: 0; }
.auth-card__mono { position: absolute; left: 50%; top: 22px; width: 40px; height: auto; transform: translateX(-50%); }

/* account */
.account { padding: clamp(32px, 5vw, 64px) 0 var(--sec); }
.account .welcome { margin-bottom: 18px; }
.welcome p { margin: 0; }
.acc-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 24px; border-radius: var(--radius-lg); background: radial-gradient(60% 140% at 100% 0%, var(--wine-tint), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--hair-gold-2); }
.acc-hero__ava { width: 64px; height: 76px; display: grid; place-items: center; padding-top: 10px; font: 500 22px/1 var(--font-head); color: var(--color-on-button); background: var(--color-button); -webkit-mask: var(--ogee) center/100% 100%; mask: var(--ogee) center/100% 100%; }
.acc-hero h1 { font: 500 clamp(26px, 3vw, 36px)/1.15 var(--font-head); }
.acc-hero p { color: var(--color-text-2); font-size: 14px; margin-top: 4px; overflow-wrap: anywhere; }
.acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 28px; }
.acc-stat { padding: 16px 18px; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--hair); display: grid; gap: 4px; }
.acc-stat small { font: 600 10.5px/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--color-gold); }
.acc-stat b { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.acc-stat b .icon { color: var(--color-gold); width: 18px; height: 18px; }
.acc-stat span { font-size: 13px; color: var(--color-text-2); }
.dot-state { width: 9px; height: 9px; border-radius: 50%; background: #E0A040; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, #E0A040 25%, transparent); }
.dot-state--ok { background: var(--color-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ok) 25%, transparent); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.break-active { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 16px; border-radius: var(--radius-md); background: var(--gold-tint); border: 1px solid var(--hair-gold); }
.break-active .icon { color: var(--color-gold); flex: none; }
.break-active p { margin: 0; }
.limit__now { display: flex; justify-content: space-between; gap: 10px; }
.limit__pending { display: grid; gap: 8px; padding: 10px; border-radius: 10px; background: var(--gold-tint); }
.limit .form { margin-top: 4px; gap: 12px; }
.limit .form-row { grid-template-columns: 1fr; }
.radio-card span { display: grid; gap: 2px; }
.radio-card small { font-size: 11.5px; color: var(--color-text-2); }
.promo-list { display: grid; gap: 8px; margin-top: 16px; }
.promo-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-0); border: 1px solid var(--hair); }
.promo-row b { display: block; }
.promo-row span { font-size: 13px; color: var(--color-text-2); }
.promo-row .tag { flex: none; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--color-gold); border: 1px solid var(--hair-gold-2); background: var(--gold-tint); }
.toggle-row { margin-top: 16px; cursor: pointer; }
.toggle-row span span { font-size: 13px; color: var(--color-text-2); }
.acc-block .note { margin-top: 16px; }
.acc-block .gate__region p { margin: 0; }

@media (max-width: 980px) {
  .acc-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .acc-hero { grid-template-columns: auto 1fr; }
  .acc-hero .btn { grid-column: 1 / -1; }
  .acc-stats { grid-template-columns: 1fr; }
  .auth__fan { display: none; }
  .promo-row { flex-direction: column; align-items: flex-start; }
}

/* On a phone the auth form is taller than the screen: the photo covers one
   screen and fades out, instead of being stretched down the whole form. */
@media (max-width: 760px) {
  .auth__bg { bottom: auto; height: 100svh; -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); }
}