.bp-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.bp-nav { display: flex; gap: 4px; flex: none; }
.bp-url { flex: 1 1 auto; min-width: 0; }
.bp-status { min-height: 20px; font-size: 13px; color: #777; margin-bottom: 6px; }
.bp-error { padding: 10px 12px; margin-bottom: 10px; border: 1px solid #ebccd1; background: #f2dede; color: #a94442; font-size: 13px; border-radius: 3px; }

.bp-controls { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-end; margin-bottom: 8px; }
.bp-devices .btn { margin-right: 4px; }
.bp-devices .bp-dev.bp-on { background: #337ab7; border-color: #2e6da4; color: #fff; }
.bp-size, .bp-zoom { display: flex; gap: 8px; align-items: flex-end; }
.bp-size label, .bp-zoom label { font-size: 13px; font-weight: bold; color: #2c3e50; margin: 0; }
.bp-size input { display: inline-block; width: 90px; }
.bp-zoom select { width: auto; display: inline-block; }
.bp-range { font-size: 12px; color: #777; margin-bottom: 6px; }
.bp-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.bp-presets .btn { padding: 2px 8px; font-size: 12px; }
.bp-presets .btn.bp-on { background: #337ab7; border-color: #2e6da4; color: #fff; }
.bp-slider { width: 100%; max-width: 520px; margin-bottom: 10px; }

.bp-stage { position: relative; min-height: 180px; border: 1px solid #d5dde6; border-radius: 4px; background: #eef1f5; padding: 12px; overflow: auto; }
.bp-empty { display: flex; align-items: center; justify-content: center; min-height: 150px; color: #888; font-size: 13px; text-align: center; }
.bp-frame-wrap { margin: 0 auto; background: #fff; border: 1px solid #b7c0cb; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.15); overflow: hidden; transform-origin: top left; }
.bp-frame-head { display: flex; justify-content: space-between; gap: 10px; padding: 4px 10px; background: #dfe5ec; font-size: 12px; color: #445; white-space: nowrap; overflow: hidden; }
.bp-frame-head .bp-title { overflow: hidden; text-overflow: ellipsis; }
.bp-frame-head .bp-dim { flex: none; font-family: monospace; }
.bp-frame-wrap iframe { display: block; border: 0; background: #fff; }
.bp-mobile .bp-frame-wrap { border-radius: 22px; border-width: 6px; border-color: #2b2f36; }
.bp-tablet .bp-frame-wrap { border-radius: 14px; border-width: 5px; border-color: #2b2f36; }
.bp-info { margin: 8px 0; font-size: 12px; color: #777; }
.bp-info:empty { display: none; }
.bp-notes { margin-top: 4px; }
.bp-botwarn { color: #c0392b; font-weight: bold; }
.bp-sub { margin: 16px 0 4px; font-weight: bold; }
.bp-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 6px 0; }
.bp-jsopt { margin: 0; font-weight: normal; cursor: pointer; }
.bp-jswarn { margin: 6px 0; padding: 8px 10px; border: 1px solid #c0392b; border-radius: 4px; background: #fdecea; color: #c0392b; font-size: 13px; }
.bp-src { border: 1px solid #b7c0cb; border-radius: 4px; background: #fff; }
.bp-src-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; background: #dfe5ec; font-size: 12px; color: #445; }
.bp-copy-msg { color: #2e7d32; }
.bp-src-text { display: block; width: 100%; height: 70vh; min-height: 300px; padding: 8px 10px; border: 0; resize: vertical; font-family: monospace; font-size: 12px; line-height: 1.5; white-space: pre; overflow: auto; }
.bp-usage-red { color: #c0392b; }

@media (max-width: 600px) {
	.bp-bar { flex-wrap: wrap; }
	.bp-url { flex-basis: 100%; order: 3; }
	.bp-controls { gap: 8px; }
}