/* Bridge design studio v58: bridge type gallery and new views */
.bd-app .bdx-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bd-app .bdx-type { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 12px; border: 1px solid var(--line, #e5ddcf); border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #1a1a1a); cursor: pointer; font: inherit; }
.bd-app .bdx-type svg { color: var(--purple, #6b2d5c); width: 100%; height: 52px; }
.bd-app .bdx-type b { font-size: .95rem; } .bd-app .bdx-type span { font-size: .78rem; color: var(--muted, #666); } .bd-app .bdx-type small { font-size: .72rem; color: var(--purple, #6b2d5c); font-weight: 600; }
.bd-app .bdx-type:hover { border-color: var(--purple, #6b2d5c); box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,.08)); }
.bd-app .bdx-type.on { border: 2px solid var(--purple, #6b2d5c); background: var(--purple-tint, rgba(107,45,92,.06)); }
.bd-app .bdx-busy { display: flex; gap: 10px; align-items: center; padding: 16px; color: var(--muted, #666); }
.bd-app .bdx-busy i, .bd-app .bdx-run::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 3px solid var(--line, #e5ddcf); border-top-color: var(--purple, #6b2d5c); border-radius: 50%; animation: bdxspin .8s linear infinite; vertical-align: middle; }
.bd-app .bdx-run::before { width: 10px; height: 10px; border-width: 2px; margin-right: 6px; }
@keyframes bdxspin { to { transform: rotate(360deg); } }
.bd-app .bdx-bar { display: inline-block; width: 70px; height: 7px; background: var(--line, #e5ddcf); border-radius: 4px; overflow: hidden; vertical-align: middle; } .bd-app .bdx-bar i { display: block; height: 100%; }
.bd-app .bdx-sp { max-width: 120px; }