/* dayfell.com — account page (sign in / create account / cloud save). Uses the palette from site.css. */
.acct-loading { color: var(--dim); }
#acctOut[hidden], #acctIn[hidden], .acct-loading[hidden], #forgotForm[hidden], #loginForm[hidden], #resetForm[hidden], #resetDone[hidden] { display: none !important; }
.acct-grid.one { grid-template-columns: 1fr; max-width: 520px; }
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1000px; align-items: start; }
.acard { background: var(--panel); clip-path: var(--notch-lg); box-shadow: inset 0 0 0 2px var(--line); padding: clamp(20px, 3vw, 32px); margin: 0; }
.acard.hot { box-shadow: inset 0 0 0 2px var(--line-2); background: radial-gradient(90% 60% at 50% 0%, rgba(212, 162, 60, .12), transparent), var(--panel); }
.acard h3 { margin-bottom: 6px; }
.acard-sub { margin: 0 0 8px; color: var(--muted); }
.afield { margin-top: 16px; }
.afield label { display: block; margin-bottom: 8px; font: 700 11px/1 var(--hud); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.afield input { width: 100%; min-width: 0; font: 500 17px var(--body); color: var(--bone); background: rgba(0, 0, 0, .55); border: 0; padding: 14px; clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line-2); }
.afield input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--amber); }
.afield input.bad { box-shadow: inset 0 0 0 2px var(--fixed); }
.afield small { display: block; margin-top: 6px; font-size: 13px; color: var(--dim); }
.acct-submit { margin-top: 22px; width: 100%; }
.acct-submit:disabled { opacity: .6; cursor: wait; transform: none; }
.who { margin: 4px 0 16px; }
.who-name { font: 700 clamp(26px, 3vw, 34px)/1 var(--pix); color: var(--gold); text-shadow: 0 3px 0 rgba(0, 0, 0, .45); word-break: break-all; }
.kv { margin: 0; display: grid; gap: 10px; }
.kv > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: baseline; }
.kv dt { font: 700 11px/1.2 var(--hud); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.kv dd { margin: 0; color: var(--bone); word-break: break-word; }
.acct-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.save-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.save-stats div { background: rgba(0, 0, 0, .35); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--line); padding: 12px 10px; text-align: center; }
.save-stats b { display: block; font: 700 24px/1 var(--pix); color: var(--gold); }
.save-stats span { display: block; margin-top: 6px; font: 700 10px/1.2 var(--hud); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.save-bag { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.save-bag li { font: 700 11px/1 var(--hud); letter-spacing: .04em; text-transform: uppercase; color: #ddd2b8; background: rgba(0, 0, 0, .35); padding: 7px 8px 8px; clip-path: var(--notch); }
.save-when { margin: 0; color: var(--dim); font-size: 14px; }
.steps { margin: 6px 0 0; padding-left: 22px; color: #ddd2b8; }
.steps li { margin: 10px 0; }
.steps b { color: var(--bone); }
@media (max-width: 820px) {
  .acct-grid { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 420px) {
  .kv > div { grid-template-columns: 1fr; gap: 2px; }
  .save-stats { grid-template-columns: 1fr 1fr; }
}