.member-connections-page .member-flow-shell { gap: 1rem; }
.member-connections-page h1, .member-connections-page h2, .member-connections-page p,
.member-connection-flow p, .member-connections-login p { margin: 0; }
.member-connections-header { display: grid; gap: .65rem; padding: .4rem .25rem .5rem; }
.member-connections-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.member-connections-page .member-connections-eyebrow { color: var(--muted); font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .3rem; }
.member-connections-page h1 { font-size: 1.8rem; font-weight: 800; line-height: 1.15; letter-spacing: -.04em; }
.member-connections-intro { color: var(--muted); font-size: .87rem; line-height: 1.55; max-width: 34rem; }
.connection-icon-button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--surface-bg); }
.connection-card { display: grid; gap: .9rem; min-width: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1.3rem; background: var(--surface-bg); box-shadow: 0 3px 12px rgba(0,0,0,.025); }
.connection-card-heading { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.connection-card-heading > div { flex: 1; min-width: 0; }
.connection-section-icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: .85rem; background: var(--surface-soft-bg); color: var(--text); font-size: 1.25rem; }
.member-connections-page h2 { color: var(--text); font-size: 1rem; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.connection-card-heading p { color: var(--muted); font-size: .76rem; line-height: 1.45; margin-top: .2rem; }
.connection-count { min-width: 1.65rem; height: 1.65rem; padding: 0 .4rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft-bg); color: var(--muted); font-size: .72rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.connection-empty { padding: .85rem 0 .05rem; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); }
.member-connection-flow, .member-connections-login { display: grid; gap: .75rem; min-width: 0; overflow-wrap: anywhere; }
.connection-provider-button { width: 100%; min-height: 3.9rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem .9rem; text-align: left; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface-soft-bg); color: var(--text); transition: border-color 140ms ease, background 140ms ease; }
.connection-provider-copy { display: grid; gap: .22rem; min-width: 0; }
.connection-provider-copy strong { font-size: .85rem; font-weight: 750; line-height: 1.35; }
.connection-provider-copy > span { color: var(--muted); font-size: .74rem; font-weight: 500; line-height: 1.4; }
.connection-provider-button > .member-symbol-icon { flex: 0 0 auto; font-size: 1.25rem; }
.connection-footnote { color: var(--muted); font-size: .73rem; line-height: 1.55; }
.member-connection-record { display: grid; gap: .5rem; min-width: 0; padding: 1rem 0 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.connection-record-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; justify-content: space-between; min-width: 0; }
.member-connection-record strong { font-size: .9rem; font-weight: 750; }
.connection-record-meta, .connection-report-time { color: var(--muted); font-size: .74rem; line-height: 1.5; overflow-wrap: anywhere; }
.connection-status { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: .4rem; padding: .18rem .4rem; font-size: .65rem; font-weight: 700; line-height: 1.4; color: var(--muted); background: var(--surface-soft-bg); }
.connection-status.is-active::before { content: ''; width: .35rem; height: .35rem; border-radius: 50%; background: currentColor; margin-right: .3rem; }
.connection-status.is-active { color: #167344; background: #edf8f0; border-color: #cce6d4; }
.connection-status.is-stale { color: #895415; background: #fff7e8; border-color: #ebd7b8; }
html[data-mode='dark'] .connection-status.is-active { color: #9ae0b6; background: #183026; border-color: #355b45; }
html[data-mode='dark'] .connection-status.is-stale { color: #f4cd8a; background: #322a1c; border-color: #655032; }
.connection-text-button { justify-self: start; min-height: 2.75rem; padding: .4rem 0; border: 0; background: transparent; color: var(--muted); font-size: .75rem; font-weight: 650; text-decoration: underline; text-underline-offset: .2em; }
.member-connection-wallet { display: grid; gap: .45rem; min-width: 0; padding: .9rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface-soft-bg); }
.connection-balance-label { color: var(--muted); font-size: .68rem; font-weight: 700; }
.member-connection-record .connection-balance-amount { font-size: 1.65rem; font-weight: 800; line-height: 1.2; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.connection-balance-amount small { font-size: .75rem; letter-spacing: 0; font-weight: 650; }
.connection-balance-note { display: flex; align-items: flex-start; gap: .5rem; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.connection-balance-note > .member-symbol-icon { flex: 0 0 auto; font-size: 1rem; margin-top: .1rem; }
.connection-verification { display: grid; gap: .85rem; padding: 1rem; min-width: 0; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-soft-bg); }
.connection-step { display: flex; align-items: flex-start; gap: .6rem; }
.connection-step-number { display: grid; place-items: center; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--accent); color: var(--accent-solid-text); font-size: .68rem; font-weight: 750; }
.connection-step strong { display: block; font-size: .83rem; line-height: 1.5; }
.connection-step p { color: var(--muted); font-size: .74rem; line-height: 1.5; margin-top: .2rem; }
.member-connection-flow .field { display: grid; gap: .4rem; min-width: 0; margin: 0; }
.member-connection-flow .field > span { font-size: .75rem; font-weight: 650; }
.member-connection-flow input { width: 100%; min-width: 0; min-height: 3rem; padding: .7rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--input-bg); color: var(--text); font-size: 1rem; }
.member-connection-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.connection-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; max-width: 100%; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface-bg); color: var(--text); font-size: .8rem; font-weight: 700; text-decoration: none; white-space: normal; text-align: center; }
.connection-open-provider { justify-content: space-between; width: 100%; }
.connection-open-provider .member-symbol-icon { font-size: 1rem; flex: 0 0 auto; }
.connection-button.is-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-solid-text); }
.connection-button.is-danger { color: var(--danger); }
.connection-message { display: flex; align-items: flex-start; gap: .4rem; padding: .75rem; border: 1px solid var(--line); border-radius: .75rem; color: var(--muted); background: var(--surface-soft-bg); font-size: .78rem; line-height: 1.55; overflow-wrap: anywhere; }
.connection-message.is-error { color: var(--danger); }
.connection-message .member-symbol-icon { font-size: 1rem; margin-top: .1rem; }
.connection-confirmation { display: grid; gap: .8rem; font-size: .8rem; line-height: 1.5; }
.member-connections-login { gap: 1rem; }
.connection-login-divider { display: flex; align-items: center; gap: .85rem; color: var(--muted); font-size: .75rem; line-height: 1; }
.connection-login-divider::before, .connection-login-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.connection-provider-button.is-sign-in { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem; gap: .6rem; min-height: 3rem; padding: .8rem .9rem; border-radius: .85rem; background: var(--surface-bg); text-align: center; font-size: .84rem; font-weight: 650; line-height: 1.4; }
.connection-provider-button.is-sign-in::after { content: ''; }
.login-stage .member-login-register { margin: .25rem 0 0; padding-top: 0; border-top: 0; }
.member-profile-connections { display: flex; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1.1rem; color: var(--text); background: var(--surface-soft-bg); text-decoration: none; }
.connection-profile-copy { flex: 1; display: grid; gap: .15rem; min-width: 0; }
.connection-profile-copy strong { font-size: .94rem; font-weight: 750; }
.connection-profile-copy small { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.member-profile-connections > .member-symbol-icon:last-child { flex: 0 0 auto; color: var(--muted); font-size: 1.2rem; }
.connection-provider-button:hover:not(:disabled), .connection-icon-button:hover:not(:disabled), .connection-button:hover:not(:disabled), .member-profile-connections:hover { border-color: var(--accent); color: var(--text); }
.connection-button.is-primary:hover:not(:disabled) { color: var(--accent-solid-text); }
.connection-provider-button:focus-visible, .connection-icon-button:focus-visible, .connection-button:focus-visible, .connection-text-button:focus-visible, .member-profile-connections:focus-visible, .member-connection-flow input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.connection-provider-button:disabled, .connection-icon-button:disabled, .connection-button:disabled, .connection-text-button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 380px) {
    .connection-card { padding: 1rem .85rem; }
    .connection-card-heading { gap: .55rem; }
    .connection-section-icon { width: 2.2rem; height: 2.2rem; }
    .connection-verification { padding: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .connection-provider-button { transition: none; } }