.bsv-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 4px 0 14px;
}
.bsv-bar-label {
color: #64748b;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.bsv-toggle {
display: inline-flex;
padding: 3px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.06);
}
.bsv-toggle-btn {
margin: 0;
padding: 6px 14px;
border: 0;
border-radius: 999px;
background: transparent;
box-shadow: none;
color: #475569;
font: inherit;
font-size: 13px;
font-weight: 750;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.bsv-toggle-btn[aria-pressed="true"] {
background: #ffffff;
color: #0f172a;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}
.bsv-toggle-btn:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.bsv-bar.is-loading .bsv-toggle { opacity: 0.6; }
.bsv-bar-note { color: #b45309; font-size: 12.5px; }
.bsv-bar-hint { color: #64748b; font-size: 12.5px; }
.bsv-tryit {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 14px 0;
padding: 12px 14px;
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 14px;
background: #ffffff;
}
.bsv-tryit-copy { display: grid; gap: 2px; }
.bsv-tryit-copy strong { color: #0f172a; font-size: 14.5px; }
.bsv-tryit-copy span { color: #64748b; font-size: 13px; }
.bsv-tryit-btn {
margin: 0;
padding: 9px 18px;
border: 0;
border-radius: 999px;
background: #0a84ff;
box-shadow: none;
color: #ffffff;
font: inherit;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.bsv-tryit-btn:focus-visible { background: #0070e0; outline: none; }
@media (hover: hover) and (pointer: fine) {
.bsv-tryit-btn:hover { background: #0070e0; outline: none; }
}
.bsv-modal {
position: fixed;
inset: 0;
z-index: 1500;
display: grid;
place-items: center;
padding: 16px;
background: rgba(15, 23, 42, 0.5);
}
.bsv-modal-box {
display: flex;
flex-direction: column;
width: min(1100px, 100%);
height: min(820px, calc(100vh - 32px));
height: min(820px, calc(100dvh - 32px));
overflow: hidden;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 30px 80px rgba(15, 23, 42, 0.3);
}
.bsv-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid #eef2f7;
}
.bsv-modal-close {
margin: 0;
padding: 2px 10px;
border: 0;
border-radius: 8px;
background: rgba(15, 23, 42, 0.06);
box-shadow: none;
font: inherit;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.bsv-modal-frame { flex: 1 1 auto; width: 100%; border: 0; }
@media (max-width: 560px) {
.bsv-tryit { flex-wrap: wrap; }
}