.sbs-account { --account-accent: var(--brand, #175c58); font: 1rem/1.55 system-ui, sans-serif; color: var(--text, #172b35); max-width: 64rem; margin: 2rem auto; padding: clamp(1rem, 4vw, 2rem); border: 1px solid #d3dfe2; border-radius: 1rem; background: var(--surface, #fff); }
.sbs-account h2 { margin-top: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.sbs-account h3 { overflow-wrap: anywhere; }
.sbs-account form { display: grid; gap: 1rem; max-width: 34rem; }
.sbs-account label { display: grid; gap: .35rem; font-weight: 600; }
.sbs-account input { box-sizing: border-box; width: 100%; min-height: 2.8rem; border: 1px solid #80969d; border-radius: .4rem; padding: .65rem; color: #172b35; background: #fff; font: inherit; }
.sbs-account button { min-height: 2.8rem; padding: .65rem 1rem; border: 1px solid var(--account-accent); border-radius: .4rem; background: var(--account-accent); color: #fff; font: inherit; cursor: pointer; margin: .4rem .4rem .4rem 0; }
.sbs-account button:disabled { opacity: .55; cursor: default; }
.sbs-account :focus-visible { outline: 3px solid #b25a00; outline-offset: 3px; }
.sbs-account [role="status"] { padding: .8rem 1rem; background: #edf5f4; border-radius: .4rem; overflow-wrap: anywhere; }
.sbs-account article { padding: 1rem; margin: 1rem 0; border: 1px solid #d3dfe2; border-radius: .6rem; }
.sbs-account article h3 { margin: 0; }
@media (max-width: 480px) { .sbs-account article button { width: 100%; } }

.sbs-login { --account-accent: var(--brand, #175c58); font: 1rem/1.55 system-ui, sans-serif; color: var(--text, #172b35); box-sizing: border-box; display: flex; flex-direction: column; gap: .9rem; width: 100%; max-width: 26rem; margin: 2rem auto; padding: clamp(1.5rem, 6vw, 2.5rem) clamp(1rem, 5vw, 2rem); border: 1px solid #d3dfe2; border-radius: 1rem; background: var(--surface, #fff); box-shadow: 0 10px 30px rgb(0 0 0 / .08); }
.sbs-login-title { margin: 0 0 .4rem; text-align: center; font-size: clamp(1.5rem, 5vw, 1.9rem); line-height: 1.2; }
.sbs-login :is(button, a.sbs-login-action) { box-sizing: border-box; text-decoration: none; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.1rem; margin: 0; padding: .7rem 3rem; border: 1.5px solid var(--account-accent); border-radius: 999px; background: var(--account-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.sbs-login :is(button, a.sbs-login-action):hover:not(:disabled) { filter: brightness(.96); }
.sbs-login .sbs-login-icon { position: absolute; left: 1.1rem; display: flex; }
.sbs-login :is(button, a).sbs-login-google { background: #fff; color: #1f1f1f; border-color: #747775; }
.sbs-login :is(button, a).sbs-login-facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.sbs-login :is(button, a).sbs-login-email { background: #fff; color: var(--account-accent); }
.sbs-login button:disabled { opacity: .55; cursor: default; }
.sbs-login :focus-visible { outline: 3px solid #b25a00; outline-offset: 3px; }
.sbs-login-notice { margin: .3rem 0 0; text-align: center; font-size: .9rem; color: #4a5d64; }
.sbs-login-notice a { color: inherit; font-weight: 600; }
.sbs-login [role="status"] { margin: 0; text-align: center; }
.sbs-login [role="status"]:empty { display: none; }
.sbs-login [hidden] { display: none; }
/* signed in: just the sign-out button, not a card */
.sbs-login.sbs-login-signed-in { max-width: none; margin: 1rem 0; padding: 0; border: 0; box-shadow: none; background: none; align-items: flex-start; }
.sbs-login.sbs-login-signed-in button { width: auto; padding: .6rem 1.4rem; }

/* the header's "Sign in" dialog (signin-dialog.mjs): the same card, centered over the page */
dialog.sbs-signin { box-sizing: border-box; width: min(26rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; border-radius: 1rem; background: none; overflow: auto; }
dialog.sbs-signin::backdrop { background: rgb(0 0 0 / .45); }
dialog.sbs-signin .sbs-login { margin: 0; max-width: none; box-shadow: none; }
.sbs-signin-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.sbs-signin-top .sbs-login-title { grid-column: 2; margin: 0; white-space: nowrap; font: 700 1.6rem/1.2 system-ui, sans-serif; letter-spacing: normal; text-transform: none; color: inherit; }
.sbs-login button.sbs-signin-cancel { grid-column: 3; justify-self: end; width: auto; min-height: 2.2rem; padding: .2rem .3rem; border: 0; border-radius: .4rem; background: none; color: inherit; font-weight: 500; }
.sbs-signin-brand { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: .2rem 0 .6rem; color: var(--account-accent); font-size: 1.35rem; font-weight: 700; text-align: center; }
.sbs-signin-brand img { width: 3rem; height: 3rem; object-fit: contain; }
@media (max-width: 380px) { .sbs-signin-top { grid-template-columns: 1fr auto; } .sbs-signin-top .sbs-login-title { grid-column: 1; justify-self: start; white-space: normal; } .sbs-login button.sbs-signin-cancel { grid-column: 2; } }