*{margin:0;padding:0;box-sizing:border-box}html,body,#app{height:100%}body{background:#f0f2f5;font-family:PingFang SC,Source Han Sans CN,Noto Sans CJK SC,-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:.4px;line-height:1.5}.designer{display:flex;flex-direction:column;height:100vh}.param-bar{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:2;max-width:calc(100% - 24px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 14px;background:#ffffff6b;border-radius:10px;border:.5px solid rgba(0,0,0,.05);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 0 .5px #ffffffd9,0 2px 8px #0000000a;white-space:nowrap;line-height:1.4;font-variant-numeric:tabular-nums;animation:ui-fadein .3s ease}@keyframes ui-fadein{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.param-sep{width:.5px;height:9px;background:#ececec;flex-shrink:0;align-self:center}.param-item{display:flex;align-items:baseline;flex-shrink:0;padding:0 4px}.param-item .label{font-size:10px;color:#a5a5a5;font-weight:400;margin-right:4px;letter-spacing:.6px}.param-item .value{font-size:13px;font-weight:500;color:#111;letter-spacing:.3px}.param-item .unit{font-size:10px;color:#a5a5a5;margin-left:2px}.param-item .value.price{color:#111;font-weight:600}.stage{position:relative;flex:1;min-height:0;overflow:hidden}.canvas-box{position:absolute;top:0;right:0;bottom:0;left:0}.brand-mark{position:absolute;left:50%;top:31.7%;transform:translate(-50%,-50%);z-index:1;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;-webkit-user-select:none;user-select:none}.bm-cn{font-size:17px;font-weight:500;color:#bfc4cb;letter-spacing:6px;text-indent:6px}.bm-en{font-size:9px;color:#d5d8dd;letter-spacing:3px;text-indent:3px}.webgl-fallback{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:0 32px;text-align:center;font-size:14px;color:#999;line-height:1.6}.tool-stack{position:absolute;left:10px;top:76px;z-index:2;display:flex;flex-direction:column;gap:12px;animation:ui-fadein-simple .3s ease}@keyframes ui-fadein-simple{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tool-card{display:flex;flex-direction:column;background:#ffffff6b;border-radius:14px;border:.5px solid rgba(0,0,0,.05);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 0 .5px #ffffffd9,0 4px 14px #0000000a;overflow:hidden}.tool-item{width:44px;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;border:none;background:transparent;cursor:pointer;font-size:9px;color:#8a8a8a;letter-spacing:.8px}.tool-item svg{width:15px;height:15px}.tool-item+.tool-item{border-top:1px solid rgba(0,0,0,.05)}.tool-item:active{background:#0000000a}.save-fab{position:absolute;right:16px;bottom:calc(42vh + 16px);z-index:3;background:#1a1a1a;color:#fff;font-size:13px;font-weight:500;letter-spacing:3px;text-indent:3px;border:none;border-radius:20px;padding:9px 22px;cursor:pointer;box-shadow:inset 0 .5px #ffffff38,0 4px 14px #0000001a;transition:bottom .3s ease,transform .12s ease;animation:ui-fadein-simple .3s ease}.save-fab:active{transform:scale(.96)}.save-fab:disabled{opacity:.6;cursor:not-allowed}.drawer{position:absolute;left:0;right:0;bottom:0;z-index:2;height:42vh;display:flex;flex-direction:column;background:#f9fafc8c;-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);border-radius:20px 20px 0 0;border-top:.5px solid rgba(255,255,255,.9);box-shadow:0 -10px 40px #0000000d;transition:height .3s ease;animation:ui-fadein-simple .45s ease}.drawer.dragging{transition:none}.drawer-handle{height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}.drawer-handle:active{cursor:grabbing}.drawer-handle span{width:32px;height:3px;border-radius:2px;background:#e0e2e6}.drawer-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:0;overflow:hidden}.drawer-content{flex:1;min-height:0;display:flex}.drawer-cats{width:76px;flex-shrink:0;overflow-y:auto;scrollbar-width:none;border-right:.5px solid rgba(0,0,0,.06);padding:4px 0}.drawer-cats::-webkit-scrollbar{display:none}.cat-side{font-size:11px;color:#9a9a9a;font-weight:400;letter-spacing:.6px;padding:11px 8px;cursor:pointer;text-align:center;border-left:1.5px solid transparent;transition:background .15s,color .15s;line-height:1.3}.cat-side.active{background:#1111110d;color:#111;font-weight:500;border-left-color:#111}.drawer-grid{flex:1;min-width:0;overflow-y:auto;padding:0 12px 16px;scrollbar-width:none}.drawer-grid::-webkit-scrollbar{display:none}.size-pills{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 6px;max-height:56px;overflow-y:auto;scrollbar-width:none;mask-image:linear-gradient(to bottom,#000 70%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent)}.size-pills::-webkit-scrollbar{display:none}.size-pill{flex-shrink:0;font-size:11px;color:#888;font-weight:400;letter-spacing:.3px;padding:3px 11px;cursor:pointer;border-radius:12px;background:transparent;border:.5px solid rgba(0,0,0,.09);transition:background .15s,color .15s,border-color .15s}.size-pill.active{background:#1a1a1a;color:#fff;font-weight:500;border-color:#1a1a1a}.bead-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:8px;animation:grid-fade .12s ease}@keyframes grid-fade{0%{opacity:0}to{opacity:1}}.lib-item{display:flex;flex-direction:column;align-items:center;padding:14px 6px 12px;background:#ffffff80;border-radius:12px;border:.5px solid rgba(0,0,0,.035);box-shadow:0 1px 3px #00000005;cursor:pointer;transition:transform .15s,background .15s}.lib-item:active{transform:scale(.96);background:#ffffffb8}.lib-circle{width:46px;height:46px;border-radius:50%;margin-bottom:8px;object-fit:cover}.lib-name{font-size:12px;color:#1a1a1a;font-weight:500;letter-spacing:.5px;margin-bottom:2px;display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-meta{display:flex;align-items:baseline;justify-content:center;margin-top:2px;gap:0;line-height:1.4}.lib-sep{color:#d5d5d5;margin:0;font-size:10px}.lib-price{font-size:11px;font-weight:600;color:#111;letter-spacing:.2px}.lib-mm{font-size:10px;color:#a5a5a5;letter-spacing:.3px}.skel-item{display:flex;flex-direction:column;align-items:center;padding:14px 6px 12px;background:#ffffffb8;border-radius:12px;box-shadow:0 1px 3px #00000008}.skel-circle{width:46px;height:46px;border-radius:50%;margin-bottom:8px;background:#e9ebef;animation:skel-pulse 1.2s ease-in-out infinite}.skel-line{width:36px;height:9px;border-radius:5px;background:#eef0f3;animation:skel-pulse 1.2s ease-in-out infinite}@keyframes skel-pulse{0%,to{opacity:1}50%{opacity:.45}}.lib-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:36px 0;font-size:13px;color:#999}.retry-btn{border:none;background:#1a1a1a;color:#fff;font-size:13px;font-weight:600;border-radius:18px;padding:8px 24px;cursor:pointer}.retry-btn:active{transform:scale(.96)}.delete-zone{position:absolute;left:16px;right:16px;bottom:calc(42vh + 12px);height:52px;z-index:4;display:flex;align-items:center;justify-content:center;gap:8px;background:#ff3b308c;color:#fff;font-size:14px;font-weight:600;border-radius:16px;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,background .2s ease}.delete-zone.show{opacity:1;transform:translateY(0)}.delete-zone.hot{background:#ff3b30e6}.dz-icon{display:flex;align-items:center;line-height:1}.exit-preview{position:absolute;left:50%;bottom:32px;transform:translate(-50%);z-index:5;border:none;cursor:pointer;background:#111111b8;color:#fff;font-size:13px;font-weight:500;border-radius:18px;padding:9px 22px;box-shadow:0 4px 14px #00000029}.exit-preview:active{transform:translate(-50%) scale(.96)}.bead-preview-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:8;background:transparent;pointer-events:none}.bp-info{position:absolute;top:48px;left:50%;transform:translate(-50%);display:flex;align-items:baseline;gap:8px;white-space:nowrap;pointer-events:auto;background:#00000080;padding:7px 18px;border-radius:18px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.bp-name{font-size:14px;font-weight:500;color:#fff;letter-spacing:1.5px}.bp-meta{font-size:11px;color:#fff9;letter-spacing:.4px}.bp-close{position:absolute;left:50%;bottom:40px;transform:translate(-50%);pointer-events:auto;border:none;cursor:pointer;background:#00000080;color:#fff;font-size:12px;font-weight:400;letter-spacing:2.5px;text-indent:2.5px;border-radius:18px;padding:9px 30px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.bp-close:active{transform:translate(-50%) scale(.96)}.lib-item.pop{animation:card-pop .4s cubic-bezier(.34,1.56,.64,1)}@keyframes card-pop{0%{transform:scale(.95);box-shadow:0 0 0 0 var(--pop-glow, rgba(201,169,110,.5))}55%{transform:scale(1.045);box-shadow:0 0 0 11px var(--pop-glow-fade, transparent)}to{transform:scale(1);box-shadow:0 0 0 13px var(--pop-glow-fade, transparent)}}.split-bead{position:fixed;z-index:10;pointer-events:none;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px #0000001f;animation:split-fly .42s ease-out forwards}@keyframes split-fly{0%{transform:translate(-50%,-50%) scale(1);opacity:1}30%{transform:translate(-50%,-64%) scale(1.06);opacity:1}to{transform:translate(-50%,-190%) scale(.5);opacity:0}}.toast{position:fixed;left:50%;bottom:12vh;transform:translate(-50%);z-index:9;background:#111111d1;color:#fff;font-size:12px;line-height:1.4;letter-spacing:.5px;border-radius:16px;padding:8px 18px;max-width:76vw;opacity:0;pointer-events:none;transition:opacity .25s ease}.toast.show{opacity:1}