.account-shell { max-width: 1040px; margin: 0 auto; padding: var(--space-3xl) var(--space-lg); }
.account-shell, .account-shell * { box-sizing: border-box; }
.account-shell [hidden] { display: none !important; }
.account-intro { max-width: 680px; margin: 0 auto var(--space-2xl); text-align: center; }
.account-cross { display: block; color: var(--color-accent); font: 2.25rem var(--font-serif); }
.account-eyebrow { color: var(--color-accent); font-size: var(--text-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--space-sm); }
.account-intro h1 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
.account-intro > p:last-child, .account-muted, .account-hint { color: var(--color-text-muted); }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
.account-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.account-card h2 { font-size: var(--text-2xl); margin-bottom: var(--space-xs); overflow-wrap: anywhere; }
.account-single { max-width: 620px; margin: 0 auto; }
.account-loading { max-width: 620px; margin: auto; text-align: center; color: var(--color-text-muted); }
.account-form { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.account-form label { display: grid; gap: 6px; font-size: var(--text-sm); font-weight: 600; }
.account-form input, .account-form select { width: 100%; padding: 11px 12px; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); font: inherit; }
.account-form input:focus { outline: 2px solid color-mix(in srgb, var(--color-accent) 35%, transparent); border-color: var(--color-accent); }
.account-form .btn { width: 100%; }
.account-hint { font-size: var(--text-xs); margin-top: calc(var(--space-sm) * -1); }
.account-link { margin-top: var(--space-md); padding: 0; border: 0; background: none; color: var(--color-accent); cursor: pointer; font: inherit; }
.account-subform { padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.account-google { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); padding: 11px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); background: var(--color-bg); font-weight: 600; }
.account-google:hover { text-decoration: none; border-color: var(--color-accent); }
.account-google span { color: #4285f4; font-weight: 800; }
.account-or { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-text-muted); font-size: var(--text-xs); margin-top: var(--space-lg); }
.account-or::before, .account-or::after { content: ''; height: 1px; background: var(--color-border); flex: 1; }
.account-notice { max-width: 760px; margin: 0 auto var(--space-lg); padding: 12px 16px; border: 1px solid var(--color-border); border-inline-start: 4px solid var(--color-accent); background: var(--color-surface); border-radius: var(--radius-md); }
.account-notice.is-error { border-inline-start-color: #b42318; }
.account-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.account-data, .account-danger { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.account-data { scroll-margin-top: 7rem; }
.account-data h3, .account-danger h3 { margin-bottom: var(--space-xs); font-size: var(--text-lg); }
.account-data p, .account-danger p { color: var(--color-text-muted); font-size: var(--text-sm); }
#subscription-details > p { margin: var(--space-sm) 0; }
#cancel-subscription-form { margin-top: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
#cancel-subscription-form .account-actions { margin-top: 0; }
#cancel-subscription-form .account-actions .btn { width: auto; }
.btn--danger { color: #fff; background: #9f241f; border-color: #9f241f; }
.btn--danger:hover { color: #fff; background: #7f1d1d; border-color: #7f1d1d; }
.account-dialog { width: min(92vw, 480px); max-width: none; margin: auto; padding: 0; color: var(--color-text); background: transparent; border: 0; overflow: visible; }
.account-dialog::backdrop { background: rgba(15, 18, 24, .72); backdrop-filter: blur(5px); }
.account-dialog-panel { position: relative; padding: clamp(28px, 5vw, 42px); background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border)); border-radius: calc(var(--radius-lg) + 4px); box-shadow: 0 24px 80px rgba(0, 0, 0, .34); text-align: start; overscroll-behavior: contain; }
.account-dialog-panel h2 { margin: 0 0 var(--space-sm); font-size: clamp(1.65rem, 5vw, 2.15rem); }
.account-dialog-lock { display: grid; width: 44px; height: 44px; margin-bottom: var(--space-lg); place-items: center; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); border-radius: 50%; font-size: 1.25rem; }
.account-dialog-close { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; color: var(--color-text-muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; font: 1.75rem/1 var(--font-sans); }
.account-dialog-close:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.account-dialog-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.account-dialog-notice { margin: var(--space-lg) 0 0; }
.account-dialog-cancel { display: block; margin: var(--space-lg) auto 0; }
html:has(.account-dialog[open]), body:has(.account-dialog[open]) { overflow: hidden; }
@media (max-width: 720px) { .account-grid { grid-template-columns: 1fr; } .account-shell { padding-top: var(--space-2xl); } }
@media (max-width: 520px) {
  .account-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .account-dialog-panel { max-height: calc(100dvh - 24px); padding: 28px 22px 24px; overflow-y: auto; }
  .account-dialog-lock { margin-bottom: var(--space-md); }
}
@media (prefers-reduced-motion: no-preference) {
  .account-dialog[open] { animation: account-dialog-in .18s ease-out; }
  .account-dialog[open]::backdrop { animation: account-backdrop-in .18s ease-out; }
  @keyframes account-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
  @keyframes account-backdrop-in { from { opacity: 0; } }
}