:root {
  color-scheme: dark;
  --blue: var(--sf-page, #080f23);
  --panel: var(--sf-panel, #101d35);
  --border: var(--sf-border, #2b405e);
  --text: var(--sf-text, #f6f8ff);
  --muted: var(--sf-muted, #b2c2d7);
  --orange: var(--sf-orange, #ff732c);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--blue); color: var(--text); line-height: 1.55; }
a { color: inherit; }
button, input { font: inherit; }
button, .button { min-height: 46px; }
button:disabled { opacity: .65; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.site-header, .shell, .site-footer { width: min(100% - 36px, 1020px); margin-inline: auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px; }
.wordmark { font-size: 27px; font-weight: 800; letter-spacing: -.045em; text-decoration: none; }
.brand-dot { color: var(--orange); }
.welcome { padding-block: 38px 32px; max-width: 700px; }
.eyebrow { font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-link, #8cbbff); margin: 0 0 10px; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.035em; }
h1 { font-size: clamp(36px, 6vw, 62px); }
h2 { font-size: 25px; }
h3 { font-size: 22px; }
p { color: var(--muted); margin: 14px 0; }
.intro { max-width: 540px; font-size: 17px; }
.panel { border: 1px solid var(--border); background: var(--panel); border-radius: 16px; padding: 24px; min-width: 0; }
.login-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.login-options { display: grid; gap: 10px; min-width: 0; }
.auth-tabs, .future-providers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-tabs .button[aria-pressed="true"] { background: var(--sf-selected, #213b61); border-color: var(--sf-link, #8cbbff); }
#email-form { display: grid; gap: 12px; margin-top: 18px; }
.auth-field { display: grid; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; }
.auth-field input { width: 100%; min-width: 0; padding: 12px; background: var(--sf-page, #080f23); border: 1px solid var(--sf-border, #567294); border-radius: 8px; color: var(--text); font-size: 16px; }
.show-password { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; }
.show-password input { width: 18px; height: 18px; accent-color: var(--orange); }
.future-providers { margin-top: 18px; }
#email-link-toggle { width: 100%; margin-top: 16px; }
.auth-tabs > *, .future-providers > * { min-width: 0; overflow-wrap: anywhere; }
.session-actions { display: grid; gap: 10px; }
.profile-form { display: grid; gap: 12px; margin-top: 18px; }
.profile-form .button { justify-self: start; max-width: 100%; }
#session-email { overflow-wrap: anywhere; }
.notice[data-error="true"] { background: #42291e; color: #ffd6bb; }
.button { display: inline-flex; justify-content: center; align-items: center; padding: 10px 17px; border: 1px solid var(--sf-border, #567294); background: transparent; color: var(--text); font-weight: 650; border-radius: 9px; text-decoration: none; text-align: center; }
.button:not(:disabled):hover { background: var(--sf-hover, #1c304e); }
.button.accent { background: var(--orange); border-color: var(--orange); color: var(--sf-action-text, #101a2d); }
.quiet { font-size: 13px; }
.notice { margin: 0 0 3px; padding: 12px 14px; background: var(--sf-surface, #172b49); border-radius: 8px; font-size: 13px; }
.small-note { font-size: 12px; line-height: 1.6; margin: 12px 0 0; }
.section-title { padding-block: 38px 18px; }
.section-title p { margin: 8px 0 0; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
fieldset { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
legend { font-size: 12px; color: var(--muted); padding: 0 0 8px; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.service-grid label { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 13px; }
.service-grid input { accent-color: var(--orange); width: 18px; height: 18px; flex-shrink: 0; margin: 0; }
.site-footer { padding-block: 30px; font-size: 12px; }
.site-footer p { margin: 4px 0; }
.skip-link { position: fixed; inset: 8px auto auto 8px; padding: 10px; background: var(--panel); transform: translateY(-200%); z-index: 1; }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 640px) {
  .site-header, .shell, .site-footer { width: calc(100% - 28px); }
  .welcome { padding-block: 22px 24px; }
  .panel { padding: 20px; }
  .login-panel, .account-grid { grid-template-columns: 1fr; gap: 16px; }
  .login-panel { gap: 20px; }
  h2 { font-size: 23px; }
}
@media (max-width: 340px) {
  .service-grid { grid-template-columns: 1fr; }
  .site-header { flex-wrap: wrap; }
}

/* Shared seafonic account branding. Presentation only. */
:root { --blue:var(--sf-page, #1b1d20); --panel:var(--sf-panel, #26292e); --border:var(--sf-border, #3c4148); --text:var(--sf-text, #e8eaed); --muted:var(--sf-muted, #adb2ba); --orange:var(--sf-orange, #e78a52); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { background:var(--blue); }
.site-header { padding-block:30px; }
.wordmark { font-size:1.4rem;letter-spacing:-.07em;white-space:nowrap; }
.welcome { padding-block:48px 38px; }
h1 { font-weight:600;letter-spacing:-.055em;line-height:1.04; }
h2,h3 { font-weight:600;letter-spacing:-.04em; }
.eyebrow { color:var(--muted);font-weight:500;font-size:.6875rem; }
.panel { border-radius:20px; }
.login-panel { border-top:3px solid var(--orange); }
.button { border-color:var(--border);border-radius:999px;font-weight:600; }
.button:not(:disabled):hover { background:var(--sf-surface, #30353c); }
.button.accent { color:var(--sf-page, #1b1d20); }
.button.accent:not(:disabled):hover { background:var(--sf-action, #f09a66); }
.auth-tabs .button[aria-pressed=true] { background:var(--sf-surface, #30353c);border-color:var(--sf-link, #91b4cd); }
.auth-field input { background:var(--blue);border-color:var(--border);border-radius:10px; }
.notice { background:var(--sf-surface, #30353c); }
.notice[data-error=true] { background:#42291e;color:#ffd6bb; }
@media(max-width:640px) { .welcome { padding-block:28px; }.panel { padding:20px; } }

.community-filters { display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:14px;align-items:end; }
.auth-field select { font:inherit;font-size:16px;min-height:46px;width:100%;min-width:0;padding:10px;background:var(--blue);color:var(--text);border:1px solid var(--border);border-radius:10px; }
.community-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-block:24px; }
.community-card { border-top:3px solid var(--orange); }
.community-card h2,.saved-item strong { overflow-wrap:anywhere; }
.community-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:20px; }
.community-actions .button { flex:1 1 130px;min-width:0;max-width:100%; }
.community-actions .button[aria-pressed=true] { border-color:var(--orange);background:var(--sf-selected, #3d3028); }
.community-library { margin-block:24px; }
.saved-items { list-style:none;padding:0;margin:18px 0 0; }
.saved-item { display:grid;gap:4px;border-top:1px solid var(--border);padding-block:14px; }
.saved-item .small-note { margin:0; }
@media(max-width:760px) { .community-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }.community-filters .auth-field:first-of-type { grid-column:1/-1; } }
@media(max-width:540px) { .community-grid,.community-filters { grid-template-columns:minmax(0,1fr); }.community-actions .button { flex-basis:100%; } }