[hidden] { display: none !important; }

.account-page {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  padding: 0 clamp(1rem, 4vw, 4rem);
  background: radial-gradient(circle at 50% 0, #13283c 0, #080e17 34rem, #070b12 58rem);
}

.account-page .site-header,
.account-page .landing-footer { max-width: 76rem; }
.account-page .login-button { color: var(--fg); cursor: pointer; opacity: 1; }
.account-page .login-button:hover { color: var(--accent); border-color: var(--accent); }

.auth-shell { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; padding: 3rem 0 5rem; }
.auth-card { width: min(100%, 29rem); padding: clamp(1.5rem, 5vw, 2.5rem); border: 1px solid #3a5168; border-top: 3px solid var(--accent); background: #0c1420f2; box-shadow: 0 2rem 6rem #00000073; }
.auth-card h1 { margin: 0; font-size: clamp(2.3rem, 8vw, 3.6rem); text-transform: uppercase; }
.auth-intro { color: var(--fg-dim); }
.auth-form { display: grid; gap: 1rem; margin-top: 2rem; }
.auth-form label { display: grid; gap: .4rem; color: #b7c5d3; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.auth-form input { width: 100%; min-height: 3rem; padding: .7rem .8rem; border: 1px solid #354a60; border-radius: 2px; background: #070c14; color: var(--fg); font: inherit; }
.auth-form input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-form .primary-cta { width: 100%; margin-top: .4rem; cursor: pointer; }
.auth-form .primary-cta:disabled { cursor: wait; opacity: .65; }
.form-status { min-height: 1.6rem; margin: 0; color: var(--accent-hot); font-size: .85rem; }

.account-shell { position: relative; z-index: 1; width: 100%; max-width: 76rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) 0 5rem; }
.account-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.account-heading h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: .95; text-transform: uppercase; }
.account-identity { margin: .75rem 0 0; color: #aebdcc; }
.account-status { margin: 0; color: var(--fg-dim); font: 700 .72rem/1.4 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.account-status-wrap { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.retry-button { min-height: 2.75rem; padding: .5rem .9rem; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: 800 .72rem/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }

.account-nav { position: sticky; z-index: 5; top: 0; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1.5rem; border: 1px solid var(--border); background: #08101bea; backdrop-filter: blur(12px); }
.account-nav button { min-height: 3.25rem; border: 0; border-right: 1px solid var(--border); background: transparent; color: #90a4b8; font-size: .74rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.account-nav button:last-child { border-right: 0; }
.account-nav button:hover, .account-nav button.is-active { background: #142337; color: var(--accent); }
.account-nav button.is-active { box-shadow: inset 0 -3px var(--accent); }

.account-view { min-height: 28rem; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--border); background: #0b1421d9; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
.metric-card { display: flex; flex-direction: column; padding: 1rem; border: 1px solid #2d4258; background: #08111d; }
.metric-value { color: var(--accent); font: 800 clamp(1.8rem, 5vw, 2.8rem)/1 ui-monospace, monospace; }
.metric-label { margin-top: .35rem; color: var(--fg-dim); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.record-panel { margin-top: 1.5rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-heading h2 { margin: 0; padding: 0; border: 0; font-size: 1.25rem; text-transform: uppercase; }
.section-kicker { margin: 0 0 .2rem; color: var(--accent-hot); font-size: .65rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.count-badge { min-width: 2rem; padding: .25rem .5rem; border: 1px solid #38516a; color: var(--accent); font: 800 .78rem/1 ui-monospace, monospace; text-align: center; }

.record-list { display: grid; gap: .6rem; }
.record-card { display: grid; grid-template-columns: 4rem 1fr; align-items: center; gap: 1rem; min-height: 5.4rem; padding: .65rem; border: 1px solid #273c52; background: #08111d; }
.record-card.is-featured { grid-template-columns: 6rem 1fr; min-height: 7.5rem; border-color: #4a6b83; background: linear-gradient(100deg, #102338, #09121e); }
.record-art { display: block; width: 4rem; height: 4rem; object-fit: contain; background: #050a11; image-rendering: pixelated; }
.is-featured .record-art { width: 6rem; height: 6rem; }
.record-art-missing { border: 1px dashed #465768; }
.record-copy h3, .purchase-row h3 { margin: 0; font-size: 1rem; }
.record-meta, .record-detail { margin: .2rem 0 0; color: var(--fg-dim); font-size: .78rem; }
.record-detail { color: #c1ccd7; }
.empty-state { padding: 2rem 1rem; border: 1px dashed #30465b; color: var(--fg-dim); text-align: center; }
.purchase-list { display: grid; gap: .5rem; }
.purchase-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding: .8rem 1rem; border: 1px solid #273c52; background: #08111d; }
.purchase-amount { color: var(--accent); font: 800 .9rem/1.3 ui-monospace, monospace; text-align: right; }
.refund-badge { display: block; margin-top: .35rem; color: var(--accent-hot); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 640px) {
  .account-page { padding-inline: .75rem; }
  .account-heading { align-items: flex-start; flex-direction: column; }
  .account-nav { overflow-x: auto; grid-template-columns: repeat(4, minmax(6.5rem, 1fr)); }
  .account-nav button { min-height: 3rem; font-size: .68rem; }
  .account-view { padding: .75rem; border-inline: 0; }
  .record-card, .record-card.is-featured { grid-template-columns: 3.5rem 1fr; }
  .record-art, .is-featured .record-art { width: 3.5rem; height: 3.5rem; }
  .purchase-row { align-items: flex-start; }
  .metric-card { padding: .75rem; }
}