.bg{display:flex;flex-direction:column;gap:20px}.bg__preview-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md)}.bg__preview{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);background-image:linear-gradient(45deg,#d0d0d0 25%,transparent 25%),linear-gradient(-45deg,#d0d0d0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d0d0d0 75%),linear-gradient(-45deg,transparent 75%,#d0d0d0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;overflow:hidden}.bg__preview-text{font-size:36px;font-weight:800;line-height:1;letter-spacing:2px;word-break:break-all;text-align:center;padding:0 16px}.bg__preview-controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:13px;color:var(--color-text-soft)}.bg__preview-size,.bg__preview-text-input{display:flex;align-items:center;gap:8px}.bg__preview-size input[type=range]{width:120px;accent-color:var(--color-primary, #2b6cff)}.bg__preview-text-input input[type=text]{width:120px;padding:4px 8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:13px}.bg__presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 16px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md)}.bg__presets-label{font-size:14px;font-weight:600;color:var(--color-text)}.bg__btn{padding:6px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:13px;cursor:pointer;transition:background var(--transition-fast, .15s),border-color var(--transition-fast, .15s)}.bg__btn:hover{border-color:var(--color-primary, #2b6cff);color:var(--color-primary, #2b6cff)}.bg__btn--add{align-self:flex-start;border-style:dashed;color:var(--color-text-soft)}.bg__btn--copy{min-width:60px}.bg__global{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px;padding:16px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md)}.bg__color-field{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--color-text-soft)}.bg__color-field input[type=color]{width:32px;height:32px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;background:var(--color-bg)}.bg__color-text{width:130px;padding:6px 8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:12px;font-family:var(--font-mono)}.bg__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.bg__row-label{font-size:13px;font-weight:500;color:var(--color-text-soft);min-width:36px}.bg__seg{display:flex;gap:4px;flex-wrap:wrap}.bg__seg-btn{padding:5px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text-soft);font-size:12px;cursor:pointer;transition:all var(--transition-fast, .15s)}.bg__seg-btn:hover{border-color:var(--color-primary, #2b6cff)}.bg__seg-btn.is-active{background:var(--color-primary, #2b6cff);border-color:var(--color-primary, #2b6cff);color:#fff}.bg__pos-grid{display:grid;grid-template-columns:repeat(3,28px);grid-template-rows:repeat(3,28px);gap:3px}.bg__pos-cell{border:1px solid var(--color-border);border-radius:4px;background:var(--color-bg);cursor:pointer;transition:all var(--transition-fast, .15s)}.bg__pos-cell:hover{border-color:var(--color-primary, #2b6cff);background:var(--color-bg-soft, rgba(43, 108, 255, .08))}.bg__pos-cell.is-active{background:var(--color-primary, #2b6cff);border-color:var(--color-primary, #2b6cff)}.bg__layers{display:flex;flex-direction:column;gap:14px}.bg__layer{padding:16px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:12px}.bg__layer-head{display:flex;align-items:center;justify-content:space-between}.bg__layer-title{font-size:14px;font-weight:600;color:var(--color-text)}.bg__layer-actions{display:flex;gap:4px}.bg__icon-btn{width:28px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text-soft);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast, .15s)}.bg__icon-btn:hover:not(:disabled){border-color:var(--color-primary, #2b6cff);color:var(--color-primary, #2b6cff)}.bg__icon-btn--danger:hover:not(:disabled){border-color:var(--color-error, #dc2626);color:var(--color-error, #dc2626)}.bg__icon-btn:disabled{opacity:.35;cursor:not-allowed}.bg__field{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--color-text-soft)}.bg__field--full{width:100%}.bg__field-label{font-weight:500;min-width:48px}.bg__field-val{font-family:var(--font-mono);font-size:12px;color:var(--color-primary, #2b6cff);min-width:40px}.bg__field input[type=range]{flex:1;accent-color:var(--color-primary, #2b6cff)}.bg__url-input{flex:1;padding:6px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:13px;min-width:200px}.bg__colors{display:flex;gap:16px;flex-wrap:wrap}.bg__output{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.bg__output-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--color-bg-soft, rgba(0, 0, 0, .03));border-bottom:1px solid var(--color-border)}.bg__output-label{font-size:13px;font-weight:600;color:var(--color-text)}.bg__code{margin:0;padding:14px 16px;background:var(--color-bg);font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--color-text);overflow-x:auto;white-space:pre-wrap;word-break:break-all}@media(max-width:768px){.bg__preview-text{font-size:28px}.bg__global{flex-direction:column;align-items:flex-start}.bg__colors{flex-direction:column;gap:10px}}@media(max-width:414px){.bg__preview-wrap{padding:16px}.bg__preview-text{font-size:22px;letter-spacing:1px}.bg__preview-controls{flex-direction:column;gap:10px}.bg__preview-size input[type=range]{width:100px}.bg__row{flex-direction:column;align-items:flex-start;gap:6px}.bg__row-label{min-width:auto}.bg__seg-btn{padding:5px 8px;font-size:11px}.bg__color-text{width:100px}.bg__url-input{min-width:140px}.bg__code{font-size:12px}}:global(html[data-theme=dark]) .bg__preview{background-image:linear-gradient(45deg,#2a2a2a 25%,transparent 25%),linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a2a 75%),linear-gradient(-45deg,transparent 75%,#2a2a2a 75%)}