.vf-accounts { max-width: 1000px; margin-inline: auto; }
.vf-accounts .vf-card { margin-block: 16px; overflow-wrap: anywhere; }
.vf-account-row { border-block-start: 1px solid #7776; padding-block: 12px; }
.vf-account-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.vf-accounts button, .vf-accounts select { max-width: 100%; margin: 6px 6px 6px 0; min-height: 44px; }
.vf-accounts select, .vf-accounts label { display: block; }
.vf-accounts select { width: 100%; padding: 10px; color: inherit; background: #171d2b; border: 1px solid #888; border-radius: 6px; }
.vf-accounts fieldset { min-width: 0; border: 1px solid #7776; border-radius: 8px; }
.vf-accounts [data-state="error"] { color: #ffb4b4; }
.vf-accounts [hidden], .vf-login [hidden], .vf-home [hidden] { display: none !important; }
.vf-accounts summary, .vf-account-troubleshooting summary { cursor: pointer; min-height: 44px; padding-block: 12px; }
.vf-accounts summary:focus-visible, .vf-account-troubleshooting summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.vf-account-link-state { font-weight: 700; }
.vf-account-troubleshooting { margin-block: 16px; overflow-wrap: anywhere; }
.vf-accounts fieldset { margin-block: 12px; }
.vf-accounts fieldset label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.vf-accounts input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.vf-account-login-providers button:disabled, .vf-accounts button:disabled { opacity: .6; cursor: not-allowed; }
#vf-checking-progress { width: 100%; height: 8px; }
.vf-account-login-providers { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px; }
#vf-channel-selection select { width: 100%; max-width: 100%; min-height: 44px; margin-block: 12px; }
.vf-topbar { flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) {
  .vf-accounts { padding-inline: 12px; }
  .vf-accounts .vf-card { padding: 16px; }
  .vf-account-actions > button, .vf-accounts select { width: 100%; }
  .vf-accounts h1 { font-size: 1.75rem; }
}