/* The players' account page. Tokens and components come from /admin/admin.css. */
main.narrow { max-width: 640px; }
#app { display: grid; gap: 16px; }
.signin { margin: 24px 0 0; max-width: none; }
.label-mono { font: 0.72rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan h1 { font-size: 1.8rem; margin-top: 4px; }
.plan .badge { font-size: 0.78rem; padding: 5px 12px; }
.badge.premium { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.perks { margin: 14px 0 0; padding-left: 18px; color: var(--muted); }
.perks li { margin: 4px 0; }
.actions.left { justify-content: flex-start; }
a.btn { display: inline-block; text-decoration: none; }
.notice { margin: 8px 0 0; padding: 12px 16px; border: 1px solid var(--good); border-radius: var(--radius); color: var(--good); }
.stat { margin: 12px 0 0; font: 0.9rem var(--mono); color: var(--fg); }
h2.spaced { margin-top: 26px; }