body { min-height: 100dvh; display: grid; place-items: center; padding: 40px; }
.account-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(1040px, 100%); margin: auto; border: 1px solid var(--line); border-radius: var(--r-6); overflow: hidden; background: var(--felt); box-shadow: var(--sh-4); }
.account-intro { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 40px; overflow: hidden; background: radial-gradient(ellipse at 50% 80%, var(--gold-a08), transparent 65%); }
.account-brand { display: inline-flex; align-items: center; align-self: flex-start; gap: 11px; color: var(--text); text-decoration: none; font-size: var(--fs-16); font-weight: var(--fw-medium); letter-spacing: -.4px; }
.account-brand img { flex: none; }
.account-intro h1 { position: relative; z-index: 1; font-size: clamp(var(--fs-48), 5.2vw, var(--fs-64)); line-height: 1.04; letter-spacing: -1.5px; margin: 38px 0 0; }
.account-intro h1 em { color: var(--gold); font-weight: inherit; }
.account-art { position: relative; flex: 1; min-height: 310px; margin: 20px -12px -12px; isolation: isolate; }
.account-art::before, .account-art::after { content: ''; position: absolute; left: 50%; top: 52%; width: 88%; aspect-ratio: 1; border: 1px solid var(--gold-a15); border-radius: var(--r-round); transform: translate(-50%, -50%); z-index: -1; }
.account-art::after { width: 69%; border-style: dashed; }
.account-art img { position: absolute; left: 50%; top: 50%; width: 40%; max-width: 176px; height: auto; border-radius: var(--card-r); box-shadow: var(--sh-4); }
.account-card-left { transform: translate(-105%, -42%) rotate(-17deg); }
.account-card-right { transform: translate(5%, -42%) rotate(17deg); }
.account-card-center { transform: translate(-50%, -51%) rotate(-4deg); }
.account-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 40px; background: var(--panel); border-left: 1px solid var(--line); }
.account-card h2 { font-family: var(--font-display); font-size: var(--fs-40); font-weight: var(--fw-heavy); line-height: 1.12; margin: 0 0 10px; }
.account-card p { font-size: var(--fs-13); line-height: 1.6; color: var(--muted); }
.account-card form { display: grid; gap: 18px; margin-top: 24px; }
.account-card label { display: grid; gap: 8px; margin: 0; font-size: var(--fs-13); color: var(--text2); }
.account-card input { width: 100%; min-height: 46px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg); color: var(--text); font: inherit; }
.account-card label small { color: var(--muted); font-size: var(--fs-11); font-weight: var(--fw-regular); }
.account-card .primary { width: 100%; min-height: 48px; margin: 4px 0 0; padding: 13px; }
.account-card .account-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); }
.account-card .account-links button { min-height: 32px; padding: 4px 0; background: none; border: 0; border-radius: 0; text-decoration: underline; text-underline-offset: 3px; color: var(--gold); cursor: pointer; font: inherit; font-size: var(--fs-13); }
.account-card .feedback { margin: 0; font-size: var(--fs-13); }
.account-card .feedback:not(:empty) { margin-top: 16px; }
.account-card .feedback.error { color: var(--danger); }
.account-card .feedback.success { color: var(--green2); }
.account-card .account-links + p { margin-top: 12px; }
@media (max-width: 960px) {
  body { padding: 28px; }
  .account-intro, .account-card { padding: 32px; }
  .account-intro h1 { font-size: var(--fs-48); }
  .account-art { min-height: 290px; }
  .account-card h2 { font-size: var(--fs-32); }
}
@media (max-width: 760px) {
  body { display: block; padding: 24px 16px; }
  .account-layout { grid-template-columns: minmax(0, 1fr); max-width: 480px; border-radius: var(--r-5); }
  .account-intro { padding: 26px 26px 24px; }
  .account-brand { font-size: var(--fs-14); gap: 9px; }
  .account-brand img { width: 25px; height: auto; }
  .account-intro h1 { font-size: var(--fs-40); margin-top: 24px; letter-spacing: -1px; }
  .account-art { display: none; }
  .account-card { padding: 26px; border-left: 0; border-top: 1px solid var(--line); }
  .account-card form { gap: 16px; margin-top: 20px; }
  .account-card input { font-size: var(--fs-16); }
  .account-card .account-links { margin-top: 20px; padding-top: 8px; }
  .account-card .account-links button { min-height: 44px; }
}
.account-card .google-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; margin-top: 20px; padding: 12px 16px; border: 1px solid var(--google-border); border-radius: var(--r-2); background: var(--google-bg); color: var(--google-text); font: var(--fw-medium) var(--fs-14) var(--font-ui); cursor: pointer; }
.account-card .google-button:hover { background: var(--google-hover); }
.account-card form > .google-button, .account-card form > .account-divider { margin-top: 0; }
.account-card button:disabled { opacity: .6; cursor: wait; }
.account-card .account-divider { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: var(--muted); font-size: var(--fs-11); }
.account-divider::before, .account-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.account-card .avatar-note { margin: 20px 0 0; padding: 12px 14px; border-left: 2px solid var(--gold); background: var(--gold-a08); font-size: var(--fs-12); }
.account-card .handle-status:empty { display: none; }
.account-card .signin-methods { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.account-card .signin-methods h3 { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-medium); }
.account-card .account-links > a { display: inline-flex; align-items: center; min-height: 32px; color: var(--gold); font-size: var(--fs-13); text-underline-offset: 3px; }
.account-card .account-data { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.account-card .account-data h3 { margin: 0; font-size: var(--fs-16); }
.account-card [data-export], .account-card [data-delete-open], .account-card [data-delete-cancel], .account-card [data-deletion-check] { min-height: 44px; padding: 10px 14px; margin: 8px 0; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg); color: var(--text); cursor: pointer; font: inherit; }
.account-card .delete-account, .account-card form[data-action="delete"] .primary { color: var(--danger); background: var(--bg); border: 1px solid var(--danger); }
.account-card p { overflow-wrap: anywhere; }

.account-layout { border: var(--outline); background: var(--bg); border-radius: var(--r-4); box-shadow: var(--sh-paper); }
.account-intro { background: var(--bg); }
.account-brand { font: var(--fw-heavy) var(--fs-32)/1 var(--font-display); }
.account-art::before, .account-art::after { display: none; }
.account-art .account-goblin { width: min(100%, 330px); max-width: none; border-radius: 0; box-shadow: none; transform: translate(-50%, -50%); }
.account-card { border-left: var(--outline); }
.account-card input { background: var(--panel); border: 2px solid var(--line2); }
.account-card h2 { font-weight: var(--fw-heavy); }
@media (max-width: 760px) { .account-card { border-left: 0; border-top: var(--outline); } .account-brand { font-size: var(--fs-28); } }