/* --- 气泡工坊 --- */
#bubble-studio-screen { position: fixed; inset: 0; display: none; flex-direction: column; background: #f5f6f8; z-index: 60; }
#bubble-studio-screen.active { display: flex; }

.bs-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* 预览区 */
.bs-preview { position: absolute; inset: 0 0 44px 0; overflow-y: auto; padding: 16px 14px 24px; transition: background .25s; }
.bs-preview.bs-bg-light { background: #eff1f4; }
.bs-preview.bs-bg-dark { background: #17181c; }
.bs-preview.bs-bg-vivid { background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 45%, #a1c4fd 100%); }
.bs-preview-inner { display: flex; flex-direction: column; gap: 0; }

/* 抽屉 */
.bs-drawer {
    position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
    display: flex; flex-direction: column;
    background: #ffffff; border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .16);
    transform: translateY(calc(100% - 44px));
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
    z-index: 5;
}
.bs-drawer.open { transform: translateY(0); }
.bs-handle {
    height: 44px; flex-shrink: 0; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bs-handle span { width: 42px; height: 5px; border-radius: 3px; background: #cfd2d8; }
.bs-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 22px; }

.bs-tabs { display: flex; align-items: center; gap: 8px; padding: 4px 0 10px; position: sticky; top: 0; background: #fff; z-index: 2; }
.bs-tabs button { border: 0; background: #f0f1f4; color: #666; padding: 7px 14px; border-radius: 10px; font: inherit; font-size: 13px; }
.bs-tabs button.on { background: #1f2229; color: #fff; }
.bs-tabs .bs-spacer { flex: 1; }
.bs-tabs .bs-mini { background: #eef2f8; color: #3a6ea5; font-size: 12px; }

.bs-bgswitch { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #888; margin-bottom: 10px; }
.bs-bgswitch button { border: 1px solid #e2e5ea; background: #fff; color: #666; padding: 4px 10px; border-radius: 8px; font: inherit; font-size: 12px; }
.bs-bgswitch button.on { border-color: #1f2229; color: #1f2229; font-weight: 600; }

.bs-group-title { font-size: 12px; color: #9aa0a8; margin: 6px 0 8px; }

.bs-row {
    display: flex; align-items: center; gap: 10px;
    min-height: 40px; padding: 4px 0; border-bottom: 1px solid #f3f4f6;
}
.bs-label { flex: 1; font-size: 13px; color: #333; }
.bs-row input[type="range"] { flex: 0 0 130px; accent-color: #1f2229; }
.bs-row input[type="color"] { width: 34px; height: 26px; border: 1px solid #e2e5ea; border-radius: 6px; background: #fff; padding: 0; }
.bs-val { width: 42px; text-align: right; font-size: 12px; color: #999; font-variant-numeric: tabular-nums; }
.bs-seg { display: flex; gap: 6px; }
.bs-seg button { border: 1px solid #e2e5ea; background: #fff; color: #666; padding: 5px 12px; border-radius: 8px; font: inherit; font-size: 12px; }
.bs-seg button.on { background: #1f2229; color: #fff; border-color: #1f2229; }
.bs-switch { position: relative; width: 46px; height: 26px; }
.bs-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.bs-switch i { position: absolute; inset: 0; border-radius: 13px; background: #dcdfe4; transition: background .2s; }
.bs-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.bs-switch input:checked + i { background: #34c759; }
.bs-switch input:checked + i::after { transform: translateX(20px); }

/* 应用弹窗 */
.bs-modal { position: fixed; inset: 0; background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.bs-modal-box { width: 100%; max-width: 340px; background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.bs-modal-title { font-size: 15px; font-weight: 600; color: #222; margin-bottom: 12px; }
.bs-modal-body { max-height: 55vh; overflow-y: auto; }
.bs-field { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; color: #444; }
.bs-field input[type="text"], .bs-field input:not([type]) { flex: 1; border: 1px solid #e2e5ea; border-radius: 10px; padding: 9px; font: inherit; font-size: 13px; }
.bs-hint { font-size: 12px; color: #999; line-height: 1.6; margin: 0 0 10px; }
.bs-targets { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bs-target { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #333; padding: 8px 10px; border: 1px solid #eef0f3; border-radius: 10px; }
.bs-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.bs-btn { border: 1px solid #e2e5ea; background: #fff; color: #444; padding: 8px 16px; border-radius: 10px; font: inherit; font-size: 13px; }
.bs-btn.primary { background: #1f2229; border-color: #1f2229; color: #fff; }
.bs-empty { color: #999; font-size: 12px; padding: 12px 0; }

/* 文本控件 / 共用开关 / 代码预览 */
.bs-row input[type="text"] { flex: 1; min-width: 0; border: 1px solid #e2e5ea; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }
.bs-shared { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.bs-shared input { accent-color: #1f2229; }
.bs-code { margin: 16px 0 8px; font-size: 12px; color: #666; }
.bs-code summary { cursor: pointer; color: #3a6ea5; padding: 4px 0; }
.bs-code pre { max-height: 240px; overflow: auto; background: #f6f7f9; border-radius: 10px; padding: 10px; font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; color: #444; }