.bkbg-mcc-app{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;box-sizing:border-box}
.bkbg-mcc-app *{box-sizing:inherit}
.bkbg-mcc-wrap{background:#fff;border-radius:16px;padding:32px;max-width:620px;margin:0 auto;box-shadow:0 4px 24px rgba(0,0,0,.09)}
.bkbg-mcc-header{margin-bottom:22px}
.bkbg-mcc-title{font-family:var(--bkbg-mcc-tt-font-family,inherit);font-size:var(--bkbg-mcc-tt-font-size-d,28px);font-weight:var(--bkbg-mcc-tt-font-weight,700);font-style:var(--bkbg-mcc-tt-font-style,normal);line-height:var(--bkbg-mcc-tt-line-height-d,var(--bkbg-mcc-tt-line-height,1.2));letter-spacing:var(--bkbg-mcc-tt-letter-spacing-d,var(--bkbg-mcc-tt-letter-spacing,normal));text-decoration:var(--bkbg-mcc-tt-text-decoration,none);text-transform:var(--bkbg-mcc-tt-text-transform,none);color:#111827;margin:0 0 6px}
.bkbg-mcc-subtitle{font-family:var(--bkbg-mcc-st-font-family,inherit);font-size:var(--bkbg-mcc-st-font-size-d,15px);font-weight:var(--bkbg-mcc-st-font-weight,normal);font-style:var(--bkbg-mcc-st-font-style,normal);line-height:var(--bkbg-mcc-st-line-height-d,var(--bkbg-mcc-st-line-height,1.5));letter-spacing:var(--bkbg-mcc-st-letter-spacing-d,var(--bkbg-mcc-st-letter-spacing,normal));text-decoration:var(--bkbg-mcc-st-text-decoration,none);text-transform:var(--bkbg-mcc-st-text-transform,none);color:#6b7280;margin:0}
.bkbg-mcc-tabs{display:flex;border-radius:10px;overflow:hidden;border:1.5px solid #e5e7eb;margin-bottom:16px;width:fit-content}
.bkbg-mcc-tab{padding:8px 22px;border:none;cursor:pointer;font-weight:700;font-size:14px;font-family:inherit;transition:all .15s}
.bkbg-mcc-tab.active{background:#6c3fb5;color:#fff}
.bkbg-mcc-tab:not(.active){background:#f3f4f6;color:#374151}
.bkbg-mcc-tab:not(.active):hover{background:#e5e7eb}
.bkbg-mcc-label{display:block;font-size:12px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.bkbg-mcc-textarea{width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:15px;font-family:inherit;resize:vertical;outline:none;transition:border-color .15s;min-height:72px}
.bkbg-mcc-textarea:focus{border-color:#6c3fb5}
.bkbg-mcc-output{background:#f5f3ff;border:1.5px solid #ede9fe;border-radius:8px;padding:14px 16px;margin-bottom:14px;min-height:60px}
.bkbg-mcc-output-label{font-size:11px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.bkbg-mcc-output-text{font-family:var(--bkbg-mcc-ot-font-family,monospace);font-size:var(--bkbg-mcc-ot-font-size-d,18px);font-weight:var(--bkbg-mcc-ot-font-weight,600);font-style:var(--bkbg-mcc-ot-font-style,normal);line-height:var(--bkbg-mcc-ot-line-height-d,var(--bkbg-mcc-ot-line-height,1.6));letter-spacing:var(--bkbg-mcc-ot-letter-spacing-d,var(--bkbg-mcc-ot-letter-spacing,normal));text-decoration:var(--bkbg-mcc-ot-text-decoration,none);text-transform:var(--bkbg-mcc-ot-text-transform,none);color:#3b0764;word-break:break-all}
.bkbg-mcc-output-text.empty{opacity:.4;font-style:italic}
.bkbg-mcc-actions{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.bkbg-mcc-btn-copy{padding:8px 18px;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:13px;font-family:inherit;background:#6c3fb5;color:#fff;transition:opacity .15s}
.bkbg-mcc-btn-copy:hover{opacity:.85}
.bkbg-mcc-btn-play{padding:8px 18px;border:1.5px solid #e5e7eb;border-radius:8px;font-weight:700;cursor:pointer;font-size:13px;font-family:inherit;background:#f3f4f6;color:#374151;transition:background .15s}
.bkbg-mcc-btn-play:hover{background:#e5e7eb}
.bkbg-mcc-btn-play.playing{background:#6c3fb5;color:#fff;border-color:#6c3fb5}
.bkbg-mcc-ref{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}
.bkbg-mcc-ref summary{padding:10px 16px;font-weight:700;font-size:13px;color:#374151;cursor:pointer;background:#f9fafb;user-select:none;list-style:none}
.bkbg-mcc-ref summary::-webkit-details-marker{display:none}
.bkbg-mcc-ref summary::before{content:'▶ ';font-size:10px;opacity:.6}
.bkbg-mcc-ref[open] summary::before{content:'▼ ';font-size:10px;opacity:.6}
.bkbg-mcc-ref-grid{padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:5px;background:#f9fafb}
.bkbg-mcc-ref-cell{text-align:center;padding:5px 2px;border-radius:6px;background:#fff;border:1px solid #e5e7eb}
.bkbg-mcc-ref-char{font-weight:800;font-size:14px;color:#6c3fb5}
.bkbg-mcc-ref-code{font-family:monospace;font-size:11px;color:#6b7280;margin-top:2px}
.bkbg-mcc-toast{position:fixed;bottom:24px;right:24px;background:#111827;color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9999}
.bkbg-mcc-toast.show{opacity:1}

@media(max-width:480px){
    .bkbg-mcc-wrap{padding:20px 14px}
    .bkbg-mcc-tab{padding:7px 14px;font-size:13px}
    .bkbg-mcc-ref-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
}

@media(max-width:1024px){
    .bkbg-mcc-title{font-size:var(--bkbg-mcc-tt-font-size-t,var(--bkbg-mcc-tt-font-size-d,28px));line-height:var(--bkbg-mcc-tt-line-height-t,var(--bkbg-mcc-tt-line-height-d,var(--bkbg-mcc-tt-line-height,1.2)));letter-spacing:var(--bkbg-mcc-tt-letter-spacing-t,var(--bkbg-mcc-tt-letter-spacing-d,var(--bkbg-mcc-tt-letter-spacing,normal)))}
    .bkbg-mcc-subtitle{font-size:var(--bkbg-mcc-st-font-size-t,var(--bkbg-mcc-st-font-size-d,15px));line-height:var(--bkbg-mcc-st-line-height-t,var(--bkbg-mcc-st-line-height-d,var(--bkbg-mcc-st-line-height,1.5)));letter-spacing:var(--bkbg-mcc-st-letter-spacing-t,var(--bkbg-mcc-st-letter-spacing-d,var(--bkbg-mcc-st-letter-spacing,normal)))}
    .bkbg-mcc-output-text{font-size:var(--bkbg-mcc-ot-font-size-t,var(--bkbg-mcc-ot-font-size-d,18px));line-height:var(--bkbg-mcc-ot-line-height-t,var(--bkbg-mcc-ot-line-height-d,var(--bkbg-mcc-ot-line-height,1.6)));letter-spacing:var(--bkbg-mcc-ot-letter-spacing-t,var(--bkbg-mcc-ot-letter-spacing-d,var(--bkbg-mcc-ot-letter-spacing,normal)))}
}
@media(max-width:767px){
    .bkbg-mcc-title{font-size:var(--bkbg-mcc-tt-font-size-m,var(--bkbg-mcc-tt-font-size-t,var(--bkbg-mcc-tt-font-size-d,24px)));line-height:var(--bkbg-mcc-tt-line-height-m,var(--bkbg-mcc-tt-line-height-t,var(--bkbg-mcc-tt-line-height-d,var(--bkbg-mcc-tt-line-height,1.2))));letter-spacing:var(--bkbg-mcc-tt-letter-spacing-m,var(--bkbg-mcc-tt-letter-spacing-t,var(--bkbg-mcc-tt-letter-spacing-d,var(--bkbg-mcc-tt-letter-spacing,normal))))}
    .bkbg-mcc-subtitle{font-size:var(--bkbg-mcc-st-font-size-m,var(--bkbg-mcc-st-font-size-t,var(--bkbg-mcc-st-font-size-d,14px)));line-height:var(--bkbg-mcc-st-line-height-m,var(--bkbg-mcc-st-line-height-t,var(--bkbg-mcc-st-line-height-d,var(--bkbg-mcc-st-line-height,1.5))));letter-spacing:var(--bkbg-mcc-st-letter-spacing-m,var(--bkbg-mcc-st-letter-spacing-t,var(--bkbg-mcc-st-letter-spacing-d,var(--bkbg-mcc-st-letter-spacing,normal))))}
    .bkbg-mcc-output-text{font-size:var(--bkbg-mcc-ot-font-size-m,var(--bkbg-mcc-ot-font-size-t,var(--bkbg-mcc-ot-font-size-d,16px)));line-height:var(--bkbg-mcc-ot-line-height-m,var(--bkbg-mcc-ot-line-height-t,var(--bkbg-mcc-ot-line-height-d,var(--bkbg-mcc-ot-line-height,1.6))));letter-spacing:var(--bkbg-mcc-ot-letter-spacing-m,var(--bkbg-mcc-ot-letter-spacing-t,var(--bkbg-mcc-ot-letter-spacing-d,var(--bkbg-mcc-ot-letter-spacing,normal))))}
}