.badge-maker-container{flex-direction:column;gap:24px;display:flex}.badge-maker-grid{grid-template-columns:1.2fr .8fr;gap:24px;display:grid}@media (width<=992px){.badge-maker-grid{grid-template-columns:1fr}}.search-filter-section{flex-direction:column;gap:16px;display:flex}.catalog-search-wrapper{background-color:var(--md-sys-color-surface-container-high);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium);align-items:center;gap:12px;height:56px;padding:0 16px;display:flex}.catalog-search-wrapper input{width:100%;color:var(--md-sys-color-on-surface);font-family:var(--md-sys-typescale-font);background:0 0;border:none;outline:none;font-size:16px}.catalog-grid{border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium);background-color:var(--md-sys-color-surface-container-lowest);grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;max-height:400px;padding:8px 4px;display:grid;overflow-y:auto}.catalog-item-card{border-radius:var(--md-sys-shape-corner-medium);border:1px solid var(--md-sys-color-outline-variant);background-color:var(--md-sys-color-surface-container-low);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px;display:flex}.catalog-item-card:hover{background-color:var(--md-sys-color-surface-container);border-color:var(--md-sys-color-outline);transform:translateY(-1px)}.catalog-item-card.selected{background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-color:#0000}.customizer-options{flex-direction:column;gap:20px;display:flex}.option-group{flex-direction:column;gap:8px;display:flex}.theme-preset-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.selected-badges-list{border:1px dashed var(--md-sys-color-outline);border-radius:var(--md-sys-shape-corner-medium);background-color:var(--md-sys-color-surface-container-lowest);flex-wrap:wrap;gap:8px;min-height:48px;padding:12px;display:flex}.selected-badge-chip{border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-surface-container-highest);height:28px;color:var(--md-sys-color-on-surface);align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:500;display:inline-flex}.selected-badge-chip button{color:var(--md-sys-color-on-surface-variant);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:2px;display:flex}.selected-badge-chip button:hover{color:var(--md-sys-color-error);background-color:#ffffff1a}.preview-panel{background-color:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-large);flex-direction:column;gap:16px;padding:20px;display:flex}.preview-canvas{border-radius:var(--md-sys-shape-corner-medium);border:1px solid var(--md-sys-color-outline-variant);background-color:#0d0f12;flex-wrap:wrap;align-items:center;gap:12px;min-height:100px;padding:16px;display:flex}.code-output-panel{flex-direction:column;gap:12px;display:flex}.code-tabs{border-bottom:1px solid var(--md-sys-color-outline-variant);display:flex}.code-tab-btn{color:var(--md-sys-color-on-surface-variant);font-family:var(--md-sys-typescale-font);cursor:pointer;transition:color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);background:0 0;border:none;padding:12px 20px;font-size:14px;font-weight:500;position:relative}.code-tab-btn.active{color:var(--md-sys-color-primary)}.code-tab-btn.active:after{content:"";background-color:var(--md-sys-color-primary);border-radius:3px 3px 0 0;height:3px;position:absolute;bottom:-1px;left:0;right:0}.code-textarea-wrapper{position:relative}.code-textarea{color:#c9d1d9;border-radius:var(--md-sys-shape-corner-medium);border:1px solid var(--md-sys-color-outline-variant);resize:none;background-color:#090b0d;outline:none;width:100%;height:160px;padding:16px;font-family:Courier New,Courier,monospace;font-size:13px}.code-copy-overlay{position:absolute;top:12px;right:12px}