.oauth-page-toolbar { display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; margin-bottom:20px; }
.oauth-mode-tabs { display:flex; gap:22px; border-bottom:1px solid var(--line); }
.oauth-mode-tabs button { border:0; border-bottom:2px solid transparent; padding:12px 0; background:transparent; color:var(--muted); font-size:13px; }
.oauth-mode-tabs button[aria-selected="true"] { color:var(--brand-button); border-bottom-color:var(--brand-button); font-weight:500; }
#oauthConfiguration[hidden], #oauthConnectionsPanel[hidden], .oauth-connections [hidden] { display:none !important; }
.oauth-connections .panel-head { align-items:flex-start; gap:16px; flex-wrap:wrap; }
.oauth-caption { color:var(--muted); font-size:12px; margin:6px 0 0; max-width:640px; }
.oauth-notice, .oauth-alert { margin:0 24px 16px; padding:12px 14px; border-radius:8px; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.oauth-notice { background:var(--sky-soft); color:#1e40af; }
.oauth-notice.is-error { background:var(--coral-soft); color:#b42318; }
.oauth-alert { background:var(--amber-soft); color:#8a5a00; }
.oauth-filters { padding:0 24px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.oauth-filters input { height:36px; width:300px; max-width:100%; border:1px solid var(--line); border-radius:8px; padding:0 12px; background:white; }
.oauth-table { table-layout:fixed; min-width:1104px; width:100%; }
.oauth-table td { white-space:normal; overflow-wrap:anywhere; vertical-align:middle; }
.oauth-table td small { display:block; color:var(--muted); font-size:12px; line-height:20px; }
.oauth-table td .oauth-name { display:block; text-align:left; border:0; background:none; padding:0; color:var(--ink); font-size:12px; font-weight:500; overflow-wrap:anywhere; }
.oauth-table td .oauth-name:hover, .oauth-source-link:hover { color:var(--brand-button); text-decoration:underline; }
.oauth-table .row-actions { display:flex; flex-wrap:wrap; gap:6px; }
.oauth-source-link { border:0; background:none; text-align:left; color:var(--brand-button); padding:0; font-size:12px; overflow-wrap:anywhere; }
.oauth-batch { margin:0 24px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--muted); font-size:12px; }
.oauth-pagination { padding:16px 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); }
.oauth-page-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.oauth-pagination .segmented button { padding:5px 9px; min-width:32px; }
.oauth-empty { text-align:center; padding:46px 20px !important; color:var(--muted); }
.oauth-empty strong { display:block; font-weight:500; color:var(--ink); margin-bottom:8px; }
.oauth-empty button { margin-top:14px; }
.oauth-dialog { border:1px solid var(--line); border-radius:16px; padding:0; width:520px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); box-shadow:var(--shadow); color:var(--ink); background:var(--surface); }
.oauth-dialog::backdrop { background:rgba(11,28,48,.32); }
.oauth-dialog header { padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }
.oauth-dialog h2 { font-size:18px; font-weight:600; margin:0; overflow-wrap:anywhere; }
.oauth-dialog header button { border:0; padding:4px 8px; background:none; color:var(--muted); font-size:22px; }
.oauth-dialog-body { padding:22px 24px; overflow-wrap:anywhere; }
.oauth-dialog-body p { font-size:12px; color:var(--muted); line-height:1.8; }
.oauth-dialog .field { margin:0 0 16px; }
.oauth-dialog .field label { display:block; margin-bottom:7px; font-size:12px; color:var(--text); }
.oauth-dialog .field input { width:100%; border:1px solid var(--line); padding:10px 12px; border-radius:8px; font-size:12px; }
.oauth-dialog footer { padding:16px 24px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); background:var(--surface); }
.oauth-form-message { font-size:12px; line-height:1.8; color:#b42318; }
.oauth-steps { color:var(--muted); background:var(--surface-raised); padding:12px; border-radius:8px; margin-bottom:20px; font-size:12px; line-height:1.8; }
.oauth-drawer { margin:0 0 0 auto; height:100dvh; max-height:100dvh; max-width:100vw; width:560px; border-radius:0; }
.oauth-detail-grid { display:grid; grid-template-columns:110px minmax(0,1fr); font-size:12px; gap:14px 12px; margin:0; }
.oauth-detail-grid dt { color:var(--muted); }
.oauth-detail-grid dd { margin:0; overflow-wrap:anywhere; }
.oauth-detail-section { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.oauth-detail-section h3 { font-size:13px; font-weight:500; margin:0 0 12px; }
.oauth-account-list { list-style:none; padding:0; margin:0; max-height:280px; overflow:auto; }
.oauth-account-list li { padding:10px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; font-size:12px; }
.oauth-account-list small { display:block; color:var(--muted); }
.oauth-account-list .chip { flex-shrink:0; }
.oauth-dialog .oauth-alert { margin:0 0 18px; }
.oauth-dialog button:focus-visible, .oauth-page-toolbar button:focus-visible, .oauth-connections button:focus-visible { outline:2px solid var(--brand-button); outline-offset:3px; }
@media(max-width:540px) {
  .oauth-page-toolbar { gap:10px; align-items:flex-start; }
  .oauth-mode-tabs { width:100%; }
  .oauth-connections .panel-head, .oauth-filters, .oauth-pagination { padding-left:16px; padding-right:16px; }
  .oauth-notice, .oauth-alert, .oauth-batch { margin-left:16px; margin-right:16px; }
  .oauth-filters input { width:100%; }
  .oauth-page-actions { width:100%; gap:8px; }
  .oauth-dialog header, .oauth-dialog-body { padding:18px 16px; }
  .oauth-dialog footer { padding:14px 16px; }
  .oauth-detail-grid { grid-template-columns:85px minmax(0,1fr); }
}

.oauth-options { border:1px solid #e4e7ec; border-radius:8px; padding:12px; margin:12px 0; min-width:0; }
.oauth-options legend { font-size:12px; padding:0 5px; }
.oauth-options label { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 0; font-size:12px; overflow-wrap:anywhere; }
.oauth-options small { color:#667085; overflow-wrap:anywhere; }
#metaOAuthSetup { overflow-wrap:anywhere; }

.oauth-dialog button:disabled { opacity:.5; cursor:not-allowed; }
.oauth-form-message[data-state="success"] { color:#15803d; }