.credential-notice { padding:14px 18px; background:#f1edff; color:#65538e; border:1px solid #e6dfff; border-radius:8px; margin-bottom:18px; font-size:13px; }
.credential-panel { background:white; border:1px solid #e7e7ef; border-radius:10px; overflow:auto; }
.credential-panel table { width:100%; border-collapse:collapse; min-width:700px; table-layout:auto; }
.credential-panel th:nth-child(n) { width:auto!important; }
.credential-panel td { white-space:normal; overflow-wrap:anywhere; }
.credential-panel th,.credential-panel td { text-align:left; padding:17px 20px; border-bottom:1px solid #eeeef5; font-size:13px; }
.credential-panel th { background:#faf9ff; color:#858594; font-size:12px; }
.credential-panel td small { display:block; color:#9292a0; margin-top:6px; }
.credential-panel button:not(.primary):not(.control):not(.danger):not(.credential-copy) { color:#7952ff; border:0; background:transparent; padding:8px 10px; border-radius:6px; white-space:nowrap; }
.nav-item[data-route^="credentials/"] { font-size:12px; gap:8px; white-space:nowrap; }
.credential-pagination { display:flex; align-items:center; gap:12px; padding:20px; }
.credential-pagination span { flex:1; color:#8b8b9b; font-size:13px; }
.credential-state { padding:50px 20px; text-align:center; color:#777789; }
.credential-modal { border:0; padding:0; margin:0 0 0 auto; width:620px; max-width:100vw; height:100dvh; max-height:100dvh; color:#30303d; box-shadow:-8px 0 40px #30206015; }
.credential-modal::backdrop { background:#29234035; }
.credential-modal header { position:sticky; top:0; z-index:2; background:white; padding:24px; border-bottom:1px solid #e9e9f0; display:flex; align-items:center; justify-content:space-between; }
.credential-modal h2 { font-size:18px; margin:0; }
.credential-modal section { padding:20px 24px; }
.credential-modal h3 { font-size:14px; margin:4px 0 18px; }
.credential-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.credential-fields label { display:flex; flex-direction:column; gap:8px; font-size:12px; color:#717181; min-width:0; }
.credential-fields input,.credential-fields textarea { width:100%; box-sizing:border-box; border:1px solid #e1dfec; border-radius:6px; padding:10px; font:inherit; color:#30303d; background:#fff; }
.credential-fields textarea { min-height:115px; resize:vertical; font-family:monospace; }
.credential-fields .wide { grid-column:1/-1; }
.toolbar-spacer { flex:1; }
.credential-fields .credential-environment { margin:6px 0 0; padding:12px; background:#f2efff; border-radius:6px; color:#7151bd; }
.credential-fields .credential-environment.live-env { background:#fff5e5; color:#90621c; }
.credential-fields input:focus,.credential-fields textarea:focus { outline:2px solid #b29cff; outline-offset:1px; }
.credential-fields input:disabled { background:#faf9fc; color:#777; }
.credential-actions { padding:16px 24px; display:flex; flex-wrap:wrap; gap:10px; border-top:1px solid #e9e9f0; }
.credential-modal button,.credential-pagination button { padding:9px 14px; border:1px solid #e2dfed; border-radius:6px; background:#fff; cursor:pointer; }
.credential-modal button.primary { background:#7952ff; color:white; border-color:#7952ff; }
.credential-modal button.danger { color:#c53f53; }
.credential-modal button:disabled { cursor:not-allowed; opacity:.45; }
.credential-modal p { line-height:1.7; font-size:13px; overflow-wrap:anywhere; }
.credential-error { color:#bc3853; font-size:13px; padding:0 24px; }
.credential-secret-status { display:block; color:#8474a0; line-height:1.6; }
@media(max-width:650px) { .credential-fields { grid-template-columns:1fr; } .credential-modal { width:100vw; } }
.credential-copy-value { display:inline-flex; align-items:center; gap:4px; max-width:100%; vertical-align:middle; }
.credential-copy-value > span { overflow-wrap:anywhere; min-width:0; }
.credential-value-tooltip { position:fixed; z-index:120; max-width:min(520px,calc(100vw - 16px)); padding:8px 11px; border-radius:7px; background:#292633; color:#fff; box-shadow:0 6px 20px #24203030; font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; white-space:normal; overflow-wrap:anywhere; pointer-events:none; }
.credential-panel button.credential-copy,.credential-modal button.credential-copy { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; min-width:24px; padding:4px; margin:0 0 0 2px; border:0; border-radius:4px; color:#686674; background:transparent; vertical-align:middle; flex-shrink:0; cursor:pointer; }
.credential-copy svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.credential-panel button.credential-copy:hover,.credential-modal button.credential-copy:hover { color:#7854ee; background:#f1edff; }
.credential-panel button.credential-copy.is-copied,.credential-modal button.credential-copy.is-copied { color:#11a77b; }
.credential-copy:focus-visible { outline:2px solid #ad93ff; outline-offset:1px; }
.credential-panel button.credential-copy:disabled,.credential-modal button.credential-copy:disabled { opacity:.35; cursor:default; }
.credential-read-field,.credential-input-field { display:flex; flex-direction:column; gap:8px; font-size:12px; color:#717181; min-width:0; }
.credential-input-copy { position:relative; }
.credential-input-copy input,.credential-input-copy textarea { padding-right:38px; }
.credential-modal .credential-input-copy .credential-copy { position:absolute; right:7px; top:50%; transform:translateY(-50%); }
.credential-modal .credential-input-copy.multiline .credential-copy { top:8px; transform:none; }
.credential-panel td .credential-secret-line { margin-top:3px; }
.products-page .credential-copy { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; min-width:24px; padding:4px; margin-left:2px; border:0; border-radius:4px; background:transparent; color:#686674; vertical-align:middle; flex-shrink:0; cursor:pointer; }
.products-page .credential-copy:hover { color:#7854ee; background:#f1edff; }
.products-page .credential-copy.is-copied { color:#11a77b; }
.products-page .credential-copy:disabled { opacity:.35; cursor:default; }
.products-page .credential-copy-value > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drawer .credential-input-copy input { padding-right:38px; }
.drawer .credential-input-copy .credential-copy { position:absolute; right:7px; top:50%; transform:translateY(-50%); }
#genericContent button.credential-copy { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; min-width:24px; padding:4px; margin-left:2px; border:0; border-radius:4px; background:transparent; color:#686674; vertical-align:middle; flex-shrink:0; cursor:pointer; }
#genericContent button.credential-copy:hover { color:#7854ee; background:#f1edff; }
#genericContent button.credential-copy.is-copied { color:#11a77b; }
#genericContent button.credential-copy:disabled { opacity:.35; cursor:default; }
#genericContent .credential-copy-value > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.credential-revealed { margin:4px 0 0; padding:12px; max-height:360px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; background:#f8f7fc; border:1px solid #e5e1ef; border-radius:6px; font:12px/1.6 monospace; color:#45424e; }
.credential-products { display:flex; align-items:center; gap:9px; width:188px; height:58px; padding:14px 12px; margin:-10px 0; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain; }
.credential-products::-webkit-scrollbar { display:none; }
/* 12px leading space + five 26px icons + five 9px gaps + half an icon. */
.credential-products.has-overflow { width:200px; }
.credential-product-tooltip { position:fixed; z-index:100; max-width:min(360px,calc(100vw - 16px)); padding:8px 12px; border-radius:7px; background:#292633; color:white; box-shadow:0 5px 18px #24203026; font-size:12px; line-height:1.5; overflow-wrap:anywhere; pointer-events:none; }
.credential-product-icon { position:relative; display:inline-grid; place-items:center; flex:none; width:26px; height:26px; border-radius:6px; overflow:hidden; background:#eee9ff; color:#7854ee; font-size:12px; font-weight:600; }
.credential-product-icon img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.credential-product-icon:focus-visible { outline:2px solid #7854ee; outline-offset:2px; }
.credential-product-icon { transform:translateY(var(--dock-lift,0px)) scale(var(--dock-scale,1)); transform-origin:center; transition:transform 160ms ease-out,box-shadow 160ms ease-out; }
.credential-product-icon:hover,.credential-product-icon:focus-visible { box-shadow:0 4px 10px #6e54b52b; }
.credential-product-icon:focus-visible { --dock-scale:1.4; --dock-lift:-5px; z-index:12!important; }
@media (prefers-reduced-motion:reduce) {
  .credential-product-icon { transition:none; transform:none; }
}

/* Keep product actions outside the scrolling form: never overlay account fields. */
.drawer { width:min(520px,100vw); padding-bottom:0; display:flex; flex-direction:column; overflow:hidden; transition:transform .24s ease; }
.drawer-backdrop { right:min(520px,100vw); }
.drawer-head { flex:none; min-height:88px; height:auto; padding:18px 24px; background:#fff; }
.drawer-head strong { overflow-wrap:anywhere; line-height:1.45; }
.drawer-head > button { flex:none; }
.drawer #productForm { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:0 24px 24px; overscroll-behavior:contain; scroll-padding:20px; }
.drawer .drawer-actions { position:static; width:100%; height:auto; min-height:72px; flex:none; padding:16px 24px; gap:10px; box-shadow:0 -4px 14px #25223808; }
.drawer label,.drawer .form-row { grid-template-columns:110px minmax(0,1fr); gap:14px; line-height:1.5; }
.drawer input,.drawer select,.drawer textarea,.drawer .credential-input-copy { min-width:0; }
.drawer fieldset { min-width:0; padding:0 0 18px; margin:18px 0 0; }
.drawer fieldset > legend { padding:0; margin:0 0 12px; line-height:20px; }
.drawer fieldset > legend + label,.drawer fieldset > legend + .form-row,
.drawer #productCredentialBindings > legend + label { margin-top:0; }
.drawer select { text-overflow:ellipsis; padding-right:22px; }
.drawer #productCredentialBindings > label { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:16px 0; }
.drawer #productCredentialBindings select { min-height:38px; }
.binding-help { font-size:12px; color:#85818e; line-height:1.7; padding:10px 12px; background:#f8f7fc; border-radius:6px; }
.binding-actions { display:flex; justify-content:flex-end; margin-top:14px; }
.credential-modal header { gap:16px; }
.credential-modal header h2 { min-width:0; overflow-wrap:anywhere; line-height:1.5; }
.credential-modal header > button { flex:none; }
.credential-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.credential-actions { align-items:center; }
@media(max-width:650px) {
  .credential-fields { grid-template-columns:minmax(0,1fr); }
  .drawer label,.drawer .form-row { grid-template-columns:86px minmax(0,1fr); gap:10px; }
  .drawer #productForm { padding:0 16px 20px; }
  .drawer-head,.drawer .drawer-actions { padding:16px; }
}