/* Accounts tab: 2-panel layout (searchable list left, full detail right),
   both driven from one /api/accounts fetch -- plus the credentials
   reveal-once card shown after creating an account. */
.cred-row{ display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cred-row label{ margin: 0; width: 90px; flex-shrink: 0; }
.cred-value{ display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 14px; color: var(--paper); }
.copy-btn{ font-size: 10.5px; padding: 4px 9px; }
.copy-btn.copied{ color: var(--lamp-green); border-color: #CDEBD7; background: #EAF7EE; }

.accounts-layout{ display: flex; gap: 18px; align-items: flex-start; }
.accounts-list-panel{ width: 280px; flex-shrink: 0; }
.accounts-list-panel input{ margin-bottom: 12px; }
.account-row{
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px;
  cursor: pointer; border: 1px solid transparent; transition: background 0.12s ease, border-color 0.12s ease;
}
.account-row:hover{ background: var(--void); }
.account-row.selected{ background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); }
.account-row .status-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--lamp-green); flex-shrink: 0; }
.account-row .account-meta{ min-width: 0; }
.account-row .account-user{ font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-row .account-plan{ font-size: 11px; color: var(--paper-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accounts-detail-panel{
  flex: 1; min-width: 0; background: var(--void); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px;
}
.accounts-detail-empty{ color: var(--paper-dim); font-size: 13px; text-align: center; padding: 40px 0; }
.detail-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.detail-header h3{ margin: 0; font-family: var(--font-mono); font-size: 18px; font-weight: 700; }
.detail-field{ padding: 11px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.detail-field:last-of-type{ border-bottom: none; }
.detail-field label{ margin: 0; font-size: 11.5px; color: var(--paper-dim); flex-shrink: 0; }
.detail-field .val{ font-family: var(--font-mono); font-size: 13.5px; color: var(--paper); text-align: right; }
.detail-actions{ display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.detail-actions .btn{ flex: 1; min-width: 140px; }