/* /account — self-service profile/credits/consent/delete.
   Built on the shared paper/serif tokens from style.css. */

#account-app{position:relative;z-index:1;max-width:760px;margin:0 auto}

.account-hero{padding:8px 0 24px}
.account-eyebrow{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-family:var(--mono);margin-bottom:12px;
}
.account-hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,5vw,52px);line-height:1.05;letter-spacing:-.025em;
  color:var(--ink);
}

.account-identity{display:flex;align-items:center;gap:14px;margin:18px 0 28px}
.account-identity .avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--card);border:1px solid var(--rule);object-fit:cover;
}
.account-identity .avatar-fallback{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink);
}
.account-identity .name{font-size:16px;color:var(--ink);font-weight:500}
.account-identity .email{font-size:13px;color:var(--muted);font-family:var(--mono)}

.account-card{
  background:var(--card);border:1px solid var(--rule);border-radius:14px;
  padding:22px 24px;margin-bottom:18px;
}
.account-card h2{
  font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:6px;
}
.account-card p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-bottom:10px}
.account-card p:last-child{margin-bottom:0}

.account-balance{
  font-family:var(--serif);font-size:36px;line-height:1;letter-spacing:-.02em;
  color:var(--ink);margin:4px 0 8px;
}
.account-balance small{font-size:14px;font-family:var(--sans);color:var(--muted);margin-left:6px}
.account-sub{font-size:13px;color:var(--muted);font-family:var(--mono)}
.account-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.account-actions a.btn{text-decoration:none}

.account-status-ok{color:var(--ok)}
.account-status-muted{color:var(--muted)}

/* Danger zone */
.account-danger{
  border:1px solid color-mix(in oklab, var(--err), transparent 70%);
  background:var(--err-soft);
}
.account-danger h2{color:var(--err)}
.btn.danger{background:var(--err);color:#fff}
.btn.danger:hover:not(:disabled){filter:brightness(.95)}

.account-error{color:var(--err);font-size:13px;margin-top:10px}
.account-notice{color:var(--ok);font-size:13px;margin-top:12px;line-height:1.45}
.account-note{color:var(--muted);font-size:12.5px;margin-top:8px}