*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:#111;font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;font-size:13px;-webkit-font-smoothing:antialiased}#preview{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:none;background:#fff}#veil{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;opacity:0;pointer-events:none;transition:opacity .16s ease;z-index:8888}#veil.visible{opacity:1;pointer-events:all}#modal{position:fixed;left:20px;bottom:20px;width:244px;z-index:9999;border-radius:13px;background:#0a0a0aeb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 2px #ffffff0a inset,0 12px 48px #0009,0 0 0 .5px #00000080;color:#fff;font-size:12px;line-height:1.4;font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif}.modal-header{display:flex;align-items:center;gap:7px;padding:10px 11px 10px 10px;cursor:grab;border-radius:13px 13px 0 0;-webkit-user-select:none;user-select:none}.modal-header:active{cursor:grabbing}.drag-hint{font-size:12px;color:#ffffff2e;flex-shrink:0;line-height:1}.current-name{flex:1;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.modal-badge{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff3;flex-shrink:0}.btn-icon{background:none;border:none;cursor:pointer;color:#ffffff4d;font-size:15px;line-height:1;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:5px;transition:color .15s,background .15s;flex-shrink:0;font-family:inherit}.btn-icon:hover{color:#fff;background:#ffffff1a}.modal-body{border-top:1px solid rgba(255,255,255,.07)}#modal.minimized .modal-body{display:none}#modal.minimized{border-radius:13px}.section{border-bottom:1px solid rgba(255,255,255,.06)}.section:last-child{border-bottom:none}.categories-section{display:flex;align-items:center;padding:6px;gap:2px}.cat-arrow{background:none;border:none;cursor:pointer;color:#ffffff73;font-size:16px;line-height:1;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;flex-shrink:0;transition:color .15s,background .15s,opacity .15s;font-family:inherit}.cat-arrow:hover{color:#fff;background:#ffffff1a}.cat-arrow.faded{opacity:.15;pointer-events:none}.cat-pills-scroll{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;padding:2px}.cat-pills-scroll::-webkit-scrollbar{display:none}.cat-pill{background:transparent;border:1px solid rgba(255,255,255,.1);color:#fff6;border-radius:20px;padding:3px 8px;font-size:10px;font-weight:500;white-space:nowrap;cursor:pointer;transition:border-color .15s,color .15s,background .15s;font-family:inherit}.cat-pill:hover{border-color:#ffffff47;color:#ffffffd9}.cat-pill.active{background:#ffffff1c;border-color:#ffffff38;color:#fff;font-weight:600}.list-section{max-height:148px;overflow-y:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}.list-section::-webkit-scrollbar{width:3px}.list-section::-webkit-scrollbar-track{background:transparent}.list-section::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.design-item{padding:5px 14px 5px 18px;font-size:12px;color:#ffffff80;cursor:pointer;transition:color .1s,background .1s;position:relative;font-family:inherit}.design-item:hover{background:#ffffff0d;color:#ffffffe6}.design-item.active{color:#fff;font-weight:600}.design-item.active:before{content:"";position:absolute;left:9px;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:#ffffffa6}.mode-section{display:flex;align-items:center;padding:7px 12px;gap:8px}.section-label{font-size:10px;color:#ffffff47;text-transform:uppercase;letter-spacing:.08em;font-weight:600;flex:1}.mode-toggle{display:flex;gap:2px;background:#ffffff0f;border-radius:6px;padding:2px}.mode-btn{background:none;border:none;color:#ffffff4d;font-size:11px;padding:3px 9px;border-radius:4px;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}.mode-btn:hover{color:#ffffffb3}.mode-btn.active{background:#ffffff21;color:#fff}.swatches-section{display:flex;flex-wrap:wrap;gap:4px;padding:8px 12px;min-height:38px;align-items:center}.swatches-loading{font-size:10px;color:#ffffff2e}.swatch{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.1);flex-shrink:0;transition:transform .15s;position:relative;cursor:default}.swatch:hover{transform:scale(1.45);z-index:2;border-color:#ffffff4d}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translate(-50%);background:#050505f2;color:#ffffffe0;font-size:10px;font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif;font-weight:400;letter-spacing:0;text-transform:none;padding:4px 8px;border-radius:5px;border:1px solid rgba(255,255,255,.1);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:10001}[data-tooltip]:hover:after{opacity:1}.actions-section{display:flex;gap:6px;padding:8px 10px 10px}.action-btn{flex:1;background:#ffffff12;border:1px solid rgba(255,255,255,.09);color:#ffffff8c;border-radius:7px;padding:6px 8px;font-size:11px;font-weight:500;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:4px;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}.action-btn:hover{background:#ffffff1f;border-color:#ffffff29;color:#fff}.action-btn.copied{background:#22c55e24;border-color:#22c55e3d;color:#4ade80}.action-btn.failed{background:#ef444424;border-color:#ef44443d;color:#f87171}
