/* Chemical Bonding Lab */
.bond-lab { --bl-line: var(--pmcq-line, #d7e2e8); }
.bl-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.bl-tabs button { flex: 1 1 220px; display: flex; align-items: baseline; gap: .5rem; justify-content: center; border: 2px solid var(--bl-line); background: #fff; color: var(--bs-primary); border-radius: 12px; padding: .6rem .9rem; font-weight: 700; cursor: pointer; }
.bl-tabs button small { font-weight: 400; color: #6b7b88; }
.bl-tabs button.on { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.bl-tabs button.on small { color: rgba(255,255,255,.8); }

.bl-picker { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-bottom: .75rem; }
.bl-selects { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.bl-selects label { font-size: .8rem; color: #6b7b88; display: flex; flex-direction: column; gap: .15rem; }
.bl-selects select { min-width: 12rem; }
.bl-plus { font-size: 1.4rem; font-weight: 700; color: var(--bs-primary); padding-bottom: .15rem; }
.bl-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.bl-chip { border: 1px solid var(--bl-line); background: #fff; border-radius: 999px; padding: .25rem .8rem; font-weight: 600; color: var(--bs-primary); cursor: pointer; }
.bl-chip:hover { background: #eef5f8; }
.bl-chip.on { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }

.bl-main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
@media (max-width: 991px) { .bl-main { grid-template-columns: 1fr; } }
.bl-stagebox { position: relative; background: #fff; border: 1px solid var(--bl-line); border-radius: 14px; overflow: hidden; }
.bl-stage { display: block; width: 100%; height: auto; background: radial-gradient(circle at 50% 40%, #fff, #f3f8fb); outline-offset: -3px; }
.bl-stage.bl-3d { cursor: grab; user-select: none; -webkit-user-select: none; }
.bl-stage.bl-3d:active { cursor: grabbing; }
.bl-shapebar { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; padding: .5rem .75rem; border-top: 1px solid var(--bl-line); background: #f8fbfc; }
.bl-shapebar[hidden] { display: none; }
.bl-offline { position: absolute; top: .5rem; right: .6rem; font-size: .72rem; color: #166534; background: #dcfce7; border-radius: 999px; padding: .1rem .55rem; }
.bl-offline[hidden] { display: none; }

.bl-side { padding: .9rem; }
.bl-steps { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .3rem; }
.bl-steps button { width: 100%; text-align: left; display: flex; align-items: center; gap: .55rem; border: 1px solid transparent; background: transparent; border-radius: 10px; padding: .35rem .5rem; color: #475569; cursor: pointer; }
.bl-steps button:hover { background: #f1f6f8; }
.bl-steps button.on { background: #e6f0f5; border-color: var(--bs-primary); color: var(--bs-primary); font-weight: 700; }
.bl-num { flex: 0 0 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #e2e8f0; font-size: .8rem; font-weight: 700; }
.bl-steps button.on .bl-num { background: var(--bs-primary); color: #fff; }
.bl-steps button.done .bl-num { background: #16a34a; color: #fff; }
.bl-nav { display: flex; gap: .4rem; margin-bottom: .75rem; }
.bl-nav .btn { flex: 1; padding-left: .4rem; padding-right: .4rem; }
.bl-caption h3 { font-size: 1.05rem; color: var(--bs-primary); margin-bottom: .4rem; }
.bl-caption p { font-size: .92rem; margin-bottom: .5rem; }
.bl-note { background: #fff7e0; border-left: 3px solid #e0a526; border-radius: 6px; padding: .4rem .6rem; }

.bl-facts { margin-top: 1rem; }
.bl-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.bl-fact-grid h4 { font-size: 1.05rem; color: var(--bs-primary); }

.bl-table td, .bl-table th { vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .bl-stage * { transition: none !important; } }