.accounts-main { padding: 24px 30px; container-name: accounts-main; container-type: inline-size; min-width: 0; }
.public-connector-section { padding: 20px 0 28px; border-bottom: 1px solid #dfe3e8; }
.connector-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.connector-heading h2 { margin: 0; font-size: 22px; letter-spacing: 0; }
.account-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.accounts-main button, .account-actions a { min-height: 40px; padding: 8px 12px; border: 1px solid #cbd3dd; border-radius: 6px; background: #fff; color: #25333c; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.accounts-main button.connect-button { background: #12644f; border-color: #12644f; color: #fff; }
.accounts-main button:disabled { opacity: .5; cursor: not-allowed; }
.accounts-main button:focus-visible, .account-actions a:focus-visible { outline: 2px solid #1765aa; outline-offset: 3px; }
.public-account-row { display: grid; grid-template-columns: minmax(160px,1fr) minmax(110px,180px) minmax(220px,auto); align-items: center; gap: 20px; padding: 22px 0; border-top: 1px solid #e1e5e9; }
.public-account-row strong, .public-account-row span { display: block; overflow-wrap: anywhere; }
.public-account-row strong { font-size: 16px; margin-bottom: 4px; }
.public-account-row span, .account-empty { color: #596772; font-size: 14px; }
.connection-status[data-state="connected"] { color: #12644f; }
.connection-status[data-state="expired"], .connection-status[data-state="reconnect_required"] { color: #914719; }
.account-empty { padding: 32px 0; }
.accounts-main [role="status"] { min-height: 24px; margin: 18px 0; color: #475460; overflow-wrap: anywhere; }
@container accounts-main (max-width: 760px) { .public-account-row { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 600px) { .accounts-main { padding: 18px 16px 88px; } }