/* Product account pages reuse the application's palette and focus controls. */
.settings-page, .legal-page { width: min(100% - 2rem, 56rem); margin: 2rem auto 4rem; line-height: 1.6; }
.settings-page h1, .legal-page h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.2; margin-bottom: 1.5rem; }
.settings-page h2 { font-size: 1.2rem; margin-top: 0; }
.settings-page section, .settings-page fieldset, .settings-card { border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.5rem; margin: 1rem 0; background: var(--surface); }
.settings-page label { display: block; margin: 1rem 0; }
.settings-page input:not([type=checkbox]):not([type=hidden]), .settings-page select, .settings-page textarea { display: block; width: 100%; padding: 0.75rem; margin-top: 0.3rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg); color: var(--text); font: inherit; }
.settings-page textarea { min-height: 8rem; resize: vertical; }
.settings-page button, .settings-card button { padding: 0.65rem 1rem; border: 1px solid var(--accent); border-radius: 0.4rem; background: var(--accent); color: var(--bg); font: inherit; cursor: pointer; margin: 0.3rem 0.3rem 0.3rem 0; }
.settings-page button:disabled { opacity: 0.55; cursor: not-allowed; }
.settings-page a, .legal-page a, .settings-card a { color: var(--accent); text-underline-offset: 0.15rem; }
.settings-page pre { white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); padding: 1rem; border-radius: 0.4rem; }
.settings-page [role=alert] { border-left: 3px solid var(--warning); padding-left: 1rem; }
.settings-page :focus-visible, .legal-page :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.settings-card { max-width: 56rem; margin: 1rem auto; }
.legal-page article { max-width: 45rem; }
.legal-page nav { margin-bottom: 2rem; }
@media (max-width: 540px) { .settings-page section, .settings-page fieldset { padding: 1rem; } .settings-page button { min-height: 44px; } }

.product-logout-form { display: inline; }
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }