.production-account-page { min-width: 0; }
.production-account-page > .panel { padding: clamp(20px, 3vw, 32px); }
.production-account-page .account-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.production-account-page .account-page-status { color: var(--muted); line-height: 1.6; }
.production-account-content .panel-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.production-account-content .small { font-size: 13px; line-height: 1.6; }
.production-account-content .muted { color: var(--muted); }
.production-account-content .mono { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.production-account-content h2 { margin-top: 0; }
.production-account-content label { display: grid; gap: 8px; color: var(--muted); font-size: 14px; }
.production-account-content input, .production-account-content select { min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px; color: var(--text); background: #11191b; font: inherit; }
.production-account-content button { min-height: 44px; border: 1px solid #d5ad65; border-radius: 8px; padding: 10px 16px; color: #191e1d; background: var(--gold); font: inherit; font-weight: 600; cursor: pointer; }
.production-account-content button.secondary { color: var(--text); background: #202a2c; border-color: var(--line); }
.production-account-content button:disabled { opacity: .5; cursor: default; }
.production-account-content .form-row { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.production-account-content .membership-card form { display: grid; gap: 12px; }
.production-account-content .membership-card form button { justify-self: start; }
.production-account-content .membership-card input { width: 100%; box-sizing: border-box; }
.production-history-item { border-top: 1px solid var(--line); padding: 20px 0; }
.production-history-item h3 { margin: 0; }
.production-account-content > details { margin: 22px 0; line-height: 1.6; }
.production-account-content summary { cursor: pointer; color: var(--gold); }
.production-proof { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.production-proof pre { max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.production-account-page [hidden] { display: none !important; }
@media (max-width: 600px) { .production-account-content .membership-header { align-items: start; } .production-account-content .form-row > label { flex: 1 1 100%; } }

/* Rewards uses individual cards, avoiding a second border around the whole page. */
#production-ranks-page[data-state="ready"] { padding:0; border:0; background:transparent; box-shadow:none; }
#production-ranks-page[data-state="ready"] > .account-rewards-welcome { display:none; }
.rewards-mode-note { display:inline-flex; align-items:center; gap:8px; flex:none; font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:20px; padding:8px 12px; }
.rewards-mode-note::before { content:''; width:5px; height:5px; background:var(--gold); border-radius:50%; }
.account-rewards-welcome { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.account-rewards-welcome h3 { font-size:clamp(24px,3vw,36px); margin:12px 0; letter-spacing:-.04em; }
.account-rewards-welcome p { max-width:50ch; line-height:1.7; color:var(--muted); font-size:14px; }
.account-rewards-helms { display:flex; align-items:center; flex:none; padding:20px; border-radius:50%; background:radial-gradient(ellipse,#ac88422b,transparent 70%); }
.account-rewards-helms .membership-rank-icon { width:80px; height:96px; filter:drop-shadow(0 8px 12px #0005); }
.account-rewards-helms .membership-rank-icon:nth-child(2) { width:112px; height:130px; }
@media(max-width:760px) {
  .account-rewards-welcome { flex-direction:column-reverse; align-items:flex-start; gap:10px; }
  .account-rewards-helms { padding:0; align-self:center; }
  .account-rewards-helms .membership-rank-icon { width:64px; height:72px; }
  .account-rewards-helms .membership-rank-icon:nth-child(2) { width:85px; height:100px; }
  [data-page="ranks"] .page-intro { align-items:flex-start; }
  .rewards-mode-note { font-size:11px; }
}