.bkbg-cm-app{font-family:system-ui,-apple-system,sans-serif;box-sizing:border-box}.bkbg-cm-wrap{border-radius:12px;padding:28px;margin:0 auto}.bkbg-cm-title{font-size:var(--bkbg-cm-tt-font-size-d,26px);line-height:var(--bkbg-cm-tt-line-height-d,1.2);font-family:var(--bkbg-cm-tt-font-family,inherit);font-weight:var(--bkbg-cm-tt-font-weight,700);font-style:var(--bkbg-cm-tt-font-style,normal);text-transform:var(--bkbg-cm-tt-text-transform,none);text-decoration:var(--bkbg-cm-tt-text-decoration,none);letter-spacing:var(--bkbg-cm-tt-letter-spacing-d,normal);word-spacing:var(--bkbg-cm-tt-word-spacing-d,normal);margin:0 0 6px}.bkbg-cm-subtitle{font-size:var(--bkbg-cm-st-font-size-d,15px);line-height:var(--bkbg-cm-st-line-height-d,1.5);font-family:var(--bkbg-cm-st-font-family,inherit);font-weight:var(--bkbg-cm-st-font-weight,400);font-style:var(--bkbg-cm-st-font-style,normal);text-transform:var(--bkbg-cm-st-text-transform,none);text-decoration:var(--bkbg-cm-st-text-decoration,none);letter-spacing:var(--bkbg-cm-st-letter-spacing-d,normal);word-spacing:var(--bkbg-cm-st-word-spacing-d,normal);margin:0 0 22px}.bkbg-cm-card{border-radius:10px;padding:20px;margin-bottom:16px;box-shadow:0 2px 8px rgb(0 0 0 / .06)}.bkbg-cm-pickers{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}.bkbg-cm-picker-col{display:flex;flex-direction:column;align-items:center;gap:8px}.bkbg-cm-swatch{width:100%;height:80px;border-radius:10px;box-shadow:0 2px 8px rgb(0 0 0 / .12);border:none;cursor:pointer;transition:transform 0.15s;padding:0;overflow:hidden;position:relative}.bkbg-cm-swatch:hover{transform:scale(1.03)}.bkbg-cm-swatch input[type="color"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.bkbg-cm-swatch-label{font-size:12px;font-weight:600;opacity:.7}.bkbg-cm-plus{font-size:24px;font-weight:700;opacity:.5;text-align:center}.bkbg-cm-ratio-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}.bkbg-cm-slider{width:100%;height:6px;border-radius:3px;appearance:none;-webkit-appearance:none;outline:none;margin-bottom:16px;cursor:pointer}.bkbg-cm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid currentColor;box-shadow:0 2px 6px rgb(0 0 0 / .2);cursor:pointer;transition:transform 0.15s}.bkbg-cm-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.bkbg-cm-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid currentColor;box-shadow:0 2px 6px rgb(0 0 0 / .2);cursor:pointer}.bkbg-cm-result-swatch{width:100%;height:72px;border-radius:10px;margin-bottom:14px;box-shadow:0 2px 12px rgb(0 0 0 / .12);transition:background-color 0.15s}.bkbg-cm-formats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.bkbg-cm-format-box{background:#f9fafb;border-radius:8px;padding:10px 12px;text-align:center;cursor:pointer;transition:background 0.15s;border:1px solid #e5e7eb}.bkbg-cm-format-box:hover{background:#f3f4f6}.bkbg-cm-format-box:active{background:#e5e7eb}.bkbg-cm-format-val{font-family:monospace;font-size:13px;font-weight:700;word-break:break-all}.bkbg-cm-format-lbl{font-size:11px;opacity:.6;margin-top:3px}.bkbg-cm-copied-hint{text-align:center;font-size:12px;margin-top:6px;height:18px;transition:opacity 0.3s;opacity:0}.bkbg-cm-copied-hint.bkbg-cm-show{opacity:1}.bkbg-cm-gradient-bar{height:32px;border-radius:8px;margin-top:10px;transition:background 0.2s}.bkbg-cm-harmonies-title{font-size:14px;font-weight:700;margin-bottom:12px}.bkbg-cm-harmony-group{margin-bottom:14px}.bkbg-cm-harmony-label{font-size:12px;font-weight:600;opacity:.7;margin-bottom:6px}.bkbg-cm-harmony-swatches{display:flex;gap:8px;flex-wrap:wrap}.bkbg-cm-harmony-swatch{width:48px;height:48px;border-radius:8px;box-shadow:0 2px 6px rgb(0 0 0 / .1);cursor:pointer;position:relative;transition:transform 0.15s;border:none}.bkbg-cm-harmony-swatch:hover{transform:scale(1.1)}.bkbg-cm-harmony-hex{font-size:10px;text-align:center;margin-top:3px;font-family:monospace;opacity:.75}@media (max-width:1024px){.bkbg-cm-title{font-size:var(--bkbg-cm-tt-font-size-t,var(--bkbg-cm-tt-font-size-d,26px));line-height:var(--bkbg-cm-tt-line-height-t,var(--bkbg-cm-tt-line-height-d,1.2));letter-spacing:var(--bkbg-cm-tt-letter-spacing-t,var(--bkbg-cm-tt-letter-spacing-d,normal));word-spacing:var(--bkbg-cm-tt-word-spacing-t,var(--bkbg-cm-tt-word-spacing-d,normal))}.bkbg-cm-subtitle{font-size:var(--bkbg-cm-st-font-size-t,var(--bkbg-cm-st-font-size-d,15px));line-height:var(--bkbg-cm-st-line-height-t,var(--bkbg-cm-st-line-height-d,1.5));letter-spacing:var(--bkbg-cm-st-letter-spacing-t,var(--bkbg-cm-st-letter-spacing-d,normal));word-spacing:var(--bkbg-cm-st-word-spacing-t,var(--bkbg-cm-st-word-spacing-d,normal))}}@media (max-width:767px){.bkbg-cm-title{font-size:var(--bkbg-cm-tt-font-size-m,var(--bkbg-cm-tt-font-size-t,var(--bkbg-cm-tt-font-size-d,26px)));line-height:var(--bkbg-cm-tt-line-height-m,var(--bkbg-cm-tt-line-height-t,var(--bkbg-cm-tt-line-height-d,1.2)));letter-spacing:var(--bkbg-cm-tt-letter-spacing-m,var(--bkbg-cm-tt-letter-spacing-t,var(--bkbg-cm-tt-letter-spacing-d,normal)));word-spacing:var(--bkbg-cm-tt-word-spacing-m,var(--bkbg-cm-tt-word-spacing-t,var(--bkbg-cm-tt-word-spacing-d,normal)))}.bkbg-cm-subtitle{font-size:var(--bkbg-cm-st-font-size-m,var(--bkbg-cm-st-font-size-t,var(--bkbg-cm-st-font-size-d,15px)));line-height:var(--bkbg-cm-st-line-height-m,var(--bkbg-cm-st-line-height-t,var(--bkbg-cm-st-line-height-d,1.5)));letter-spacing:var(--bkbg-cm-st-letter-spacing-m,var(--bkbg-cm-st-letter-spacing-t,var(--bkbg-cm-st-letter-spacing-d,normal)));word-spacing:var(--bkbg-cm-st-word-spacing-m,var(--bkbg-cm-st-word-spacing-t,var(--bkbg-cm-st-word-spacing-d,normal)))}}@media (max-width:480px){.bkbg-cm-wrap{padding:16px}.bkbg-cm-formats{grid-template-columns:1fr 1fr}}@media (max-width:360px){.bkbg-cm-pickers{grid-template-columns:1fr}.bkbg-cm-plus{display:none}}