*{-webkit-tap-highlight-color:transparent}.bead-placeholder{background:transparent!important;box-shadow:none!important}.bead-flying{pointer-events:none}.diy-bracelet-container{padding:10px 20px 20px;max-width:600px;margin:0 auto;background:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}@media(max-width:768px){.diy-bracelet-container{padding:0!important;max-width:none!important;width:100vw!important;margin-left:50%!important;transform:translate(-50%)!important;background:#fff}.top-bar,.mid-controls,.search-row{padding-left:15px;padding-right:15px;margin-top:15px}.preview-section{padding:0;min-height:240px;width:100%}.main-layout{width:100%}}.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.badge-red{background:#e74c3c;color:#fff;padding:6px 12px;border-radius:20px;font-size:14px;display:flex;align-items:center;gap:5px;cursor:pointer;font-weight:500}.top-chips{display:flex;gap:10px}.chip{background:#f1f3f4;color:#5f6368;padding:6px 15px;border-radius:20px;font-size:14px;box-shadow:0 2px 5px #0000000d;display:flex;align-items:center;gap:5px}.preview-section{position:relative;background:#fff;padding:0 20px;margin-bottom:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;perspective:none;overflow:hidden}.preview-stage{position:relative;width:100%;min-height:220px;display:flex;align-items:center;justify-content:center;transform-style:flat;transition:transform .28s cubic-bezier(.2,0,.2,1);will-change:transform}.preview-section.dragging-3d .preview-stage{transition:none;cursor:grabbing}.logo-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:1}.logo-main{color:#b0b4ba;font-size:18px;font-weight:700;letter-spacing:1px}.logo-sub{color:#d1d5da;font-size:12px;margin-top:2px}.bracelet-circle{width:360px;height:360px;position:relative;border-radius:50%;z-index:2;cursor:grab;box-sizing:border-box;transform-style:flat;transition:width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1)}.bracelet-circle:before{display:none}.ring-line{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;border:2px solid #ddd;pointer-events:none;box-sizing:border-box;z-index:1;transition:none}.ring-segment-3d{position:absolute;width:2px;height:2px;background:#ddd;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 1px #0000000d}.ring-segment{display:none}.bead-on-circle:not(.is-pendant){background-color:transparent;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}.bead-on-circle.is-pendant{background-color:transparent!important;border-radius:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}.bead-on-circle img{width:100%;height:100%;object-fit:contain;display:block}.bead-on-circle.is-3d{transition:none!important}.beads-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;transform-style:flat;pointer-events:none}.mid-controls{display:flex;justify-content:space-between;width:100%;margin-bottom:8px}.icon-btn{background:#fff;border:1px solid #eee;padding:10px;border-radius:12px;cursor:pointer;box-shadow:0 2px 8px #0000000d;display:flex;align-items:center;justify-content:center;transition:all .2s}.icon-btn.delete-drop-active{border-color:#e74c3c;box-shadow:0 4px 14px #e74c3c47;color:#e74c3c;background:#fff5f5;transform:scale(1.05)}.pill-btn{background:#fff;border:1px solid #eee;padding:8px 15px;border-radius:25px;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;color:#333;box-shadow:0 2px 8px #0000000d}.search-row{display:flex;width:100%;margin-bottom:10px;align-items:center}.search-nav{display:flex;gap:8px;align-items:center;width:100%;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;padding:2px 0}.search-nav::-webkit-scrollbar{display:none}.search-nav-item{padding:8px 14px;border-radius:20px;background:#f1f3f4;font-size:13px;color:#5f6368;cursor:pointer;white-space:nowrap;transition:all .2s;font-weight:500;border:1px solid transparent}.search-nav-item:hover{background:#e8eaed}.search-nav-item.active{background:#222;color:#fff;border-color:#222}.search-trigger-btn{width:38px;height:38px;border-radius:50%;background:#f1f3f4;display:flex;align-items:center;justify-content:center;color:#5f6368;cursor:pointer;flex-shrink:0;transition:all .2s}.search-trigger-btn:hover{background:#e8eaed;color:#222}.search-floating-popup{display:none;position:absolute;bottom:calc(100% + 15px);right:0;width:280px;background:#fff;border-radius:18px;box-shadow:0 10px 30px #00000026;z-index:1000;padding:12px;animation:slideUpFade .3s cubic-bezier(.2,0,.2,1);border:1px solid #eee}.search-popup-content{display:flex;align-items:center;gap:10px}.search-input-wrapper-popup{flex:1;position:relative;display:flex;align-items:center}.search-input-popup{width:100%;background:#f1f3f4;border:1.5px solid transparent;padding:10px 15px 10px 40px;border-radius:12px;font-size:14px;color:#222;outline:none;transition:all .2s}.search-input-popup:focus{background:#fff;border-color:#222}.search-icon-popup{position:absolute;left:15px;color:#9aa0a6;pointer-events:none}.search-close-btn-small{background:#f1f3f4;border:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666;cursor:pointer;transition:all .2s}.search-close-btn-small:hover{background:#e8eaed;color:#222}.popup-arrow{position:absolute;bottom:-8px;right:15px;width:16px;height:16px;background:#fff;transform:rotate(45deg);border-right:1px solid #eee;border-bottom:1px solid #eee}@keyframes slideUpFade{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:480px){.search-row{flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.search-floating-popup{width:calc(100vw - 40px);right:-10px}.popup-arrow{right:20px}}.search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#9aa0a6}.main-layout{display:flex;border-top:1px solid #f1f3f4}.category-rail{width:80px;background:#fff;border-right:1px solid #f1f3f4;display:flex;flex-direction:column;max-height:500px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.category-rail::-webkit-scrollbar{display:none}.rail-item{padding:15px 5px;text-align:center;font-size:13px;color:#5f6368;cursor:pointer;transition:all .2s}.rail-item.active{color:#222;font-weight:700;background:#f8f9fa}.product-grid{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:15px;max-height:500px;overflow-y:auto;overflow-x:hidden;min-width:0}@media(min-width:769px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}.product-card{background:#fff;border:1px solid #f1f3f4;border-radius:15px;padding:10px;text-align:center;cursor:pointer;transition:all .2s;box-shadow:0 2px 5px #00000005;position:relative}.fav-btn{position:absolute;top:8px;right:8px;width:24px;height:24px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#9aa0a6;transition:all .2s;z-index:5;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid #eee}.fav-btn:hover{scale:1.1;color:#e74c3c}.fav-btn.active{color:#e74c3c;background:#fff;border-color:#fceaea}.fav-btn.active svg{fill:currentColor}.tutorial-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;z-index:10001;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:20px}.tutorial-content{background:#fff;width:100%;max-width:400px;border-radius:30px;padding:40px 30px;text-align:left;animation:modalFadeIn .4s cubic-bezier(.2,0,.2,1)}.tutorial-header{font-size:26px;font-weight:800;color:#222;margin-bottom:30px;text-align:center}.tutorial-step{display:flex;align-items:center;gap:15px;margin-bottom:25px;background:#f8f9fa;padding:15px;border-radius:15px;border:1px solid #eee}.step-icon{width:40px;height:40px;background:#222;color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.step-text{font-size:14px;color:#444;line-height:1.4}.step-text strong{color:#222;font-weight:700}.skip-btn{width:100%;background:#222;color:#fff;border:none;padding:16px;border-radius:30px;font-size:16px;font-weight:600;cursor:pointer;margin-top:15px;transition:all .2s}.skip-btn:hover{background:#000;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.search-nav-item.drop-target{background:#e74c3c;color:#fff;scale:1.1;box-shadow:0 0 15px #e74c3c66}.product-card:hover{box-shadow:0 5px 15px #00000014;transform:translateY(-2px)}.product-img{width:60px;height:60px;border-radius:50%;margin-bottom:8px;object-fit:cover}.product-title{font-size:12px;font-weight:500;color:#222;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2;height:2.4em;white-space:normal;word-break:break-word}.product-info{font-size:11px;color:#9aa0a6}.product-price{color:#222;font-weight:700}.bead-on-circle{position:absolute;cursor:move;touch-action:none;border-radius:50%;pointer-events:auto;transition:all .5s cubic-bezier(.4,0,.2,1)}.bead-on-circle.is-dragging{z-index:1000!important;opacity:.9;scale:1.1;box-shadow:0 8px 25px #0000004d}.bead-on-circle.no-transition,.bead-on-circle.is-3d{transition:none!important}.bead-on-circle.removing{animation:beadFall .6s cubic-bezier(.55,0,1,.45) forwards;pointer-events:none;z-index:2000}@keyframes beadFall{to{transform:translateY(500px) rotate(360deg) scale(.5);opacity:0}}.bead-on-circle img{width:100%;height:100%;object-fit:contain;border-radius:50%;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.bead-flying{pointer-events:none;position:fixed;z-index:9999}.diy-toast{position:fixed;bottom:50px;left:50%;transform:translate(-50%) translateY(20px);background:#222222f2;color:#fff;padding:12px 24px;border-radius:30px;font-size:14px;font-weight:600;z-index:1000000;opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.23,1,.32,1);pointer-events:none;box-shadow:0 8px 30px #00000059;white-space:normal;word-break:break-word;width:auto;max-width:85vw;text-align:center;border:1px solid rgba(255,255,255,.15);line-height:1.4}.diy-toast.show{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}@keyframes beadFlyOut{to{transform:scale(0);opacity:0}}.show-warning .chip-warning{color:#e74c3c;font-weight:700}@media(max-width:480px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:8px;gap:6px}.product-card{padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:110px;width:100%;box-sizing:border-box}.product-img{width:45px;height:45px;margin-bottom:4px;flex-shrink:0}.product-title{font-size:10px;line-height:1.2;height:2.4em;overflow:hidden;white-space:normal;margin-bottom:2px;width:100%;word-break:break-word}.product-info{font-size:9px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bracelet-circle{width:260px;height:260px}}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:10000;justify-content:center;align-items:center}.modal-container{background:#fff;padding:20px;border-radius:20px;width:95%;max-width:450px;position:relative;box-shadow:0 10px 25px #0000001a;max-height:90vh;overflow-y:auto}.modal-tabs{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto;padding-bottom:5px;-ms-overflow-style:none;scrollbar-width:none}.modal-tabs::-webkit-scrollbar{display:none}.modal-tab{padding:8px 16px;border-radius:8px;background:#f1f3f4;color:#5f6368;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .2s;border:none}.modal-tab.active{background:#e74c3c;color:#fff}.modal-close{position:absolute;top:15px;right:15px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#999;font-size:24px;transition:color .2s}.modal-close:hover{color:#333}.modal-content-body{text-align:center;padding:10px 0;position:relative;min-height:400px;display:flex;flex-direction:column;justify-content:space-between}.purchase-notice-container{text-align:left;padding:20px;background:#f9f6f2;border-radius:15px;color:#4a3728;position:relative;overflow:hidden;flex:1}.purchase-notice-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffffbf;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1}.purchase-notice-content{position:relative;z-index:2}.purchase-notice-title{font-size:28px;font-weight:800;text-align:center;margin-bottom:5px;color:#3d2b1f}.purchase-notice-subtitle{font-size:12px;text-align:center;color:#8c735b;margin-bottom:25px;letter-spacing:1px}.purchase-section-header{font-size:18px;font-weight:700;margin-bottom:2px}.purchase-section-subheader{font-size:12px;color:#8c735b;margin-bottom:20px}.purchase-list{list-style:none;padding:0;margin:0}.purchase-list li{font-size:14px;line-height:1.8;margin-bottom:12px;color:#3d2b1f;display:flex;gap:8px}.purchase-list li span{flex-shrink:0}.purchase-footer{text-align:right;font-size:12px;color:#8c735b;margin-top:20px}.modal-main-title{font-size:24px;font-weight:800;color:#222;margin:10px 0 5px}.modal-sub-title{font-size:14px;color:#666;line-height:1.5;margin-bottom:20px}.modal-illustration{width:100%;max-width:350px;margin:0 auto 20px;border-radius:12px;border:1px solid #f0f0f0;padding:10px;background:#fafafa}.modal-pagination{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.pagination-info{font-size:14px;color:#888}.next-btn{padding:8px 20px;background:#f1f3f4;color:#333;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.next-btn:hover{background:#e8eaed}.btn-3d{background:#fff;border:1px solid #eee;padding:10px;border-radius:12px;cursor:pointer;box-shadow:0 2px 8px #0000000d;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#5f6368;font-size:12px;gap:5px}.btn-3d.active{background:#1a1a2e;border-color:#1a1a2e;color:#fff;box-shadow:0 4px 14px #1a1a2e4d}.preview-section.mode-3d{background:#f8f9ff;border-radius:16px;outline:2px solid #e0e4ff}.preview-section.mode-3d .bracelet-circle{cursor:grab}.preview-section.mode-3d.dragging-3d .bracelet-circle{cursor:grabbing}.hint-3d{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:11px;color:#aaa;white-space:nowrap;pointer-events:none;transition:opacity .3s;opacity:0}.btn-3d{background:#fff;border:1px solid #eee;padding:8px 14px;border-radius:20px;cursor:pointer;box-shadow:0 2px 8px #0000000d;display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:600;color:#5f6368;transition:all .25s;letter-spacing:.5px}.btn-3d:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-1px)}.btn-3d.active{background:linear-gradient(135deg,#1a1a2e,#16213e);border-color:transparent;color:#fff;box-shadow:0 4px 16px #1a1a2e59}#canvas-3d-container{display:none;width:100%;height:100%;position:absolute;top:0;left:0;border-radius:16px;overflow:hidden;cursor:grab}#canvas-3d-container:active{cursor:grabbing}#canvas-3d-container canvas{width:100%!important;height:100%!important;display:block}.hint-3d{position:absolute;bottom:12px;left:50%;transform:translate(-50%);font-size:11px;color:#999;white-space:nowrap;pointer-events:none;z-index:10;background:#ffffffd9;padding:4px 10px;border-radius:20px;opacity:0;transition:opacity .3s}.preview-section.mode-3d .hint-3d{opacity:1}.preview-section.mode-3d{background:#0a0a1a;border-radius:16px}.preview-section.mode-3d .logo-center{display:none}.loading-3d{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;font-size:13px;z-index:5}.loading-3d-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin3d .8s linear infinite}@keyframes spin3d{to{transform:rotate(360deg)}}.wrist-modal-container{background:#fff;padding:30px;border-radius:28px;width:90%;max-width:380px;position:relative;box-shadow:0 15px 40px #00000026;animation:modalFadeIn .3s cubic-bezier(.2,0,.2,1)}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.wrist-modal-header{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;color:#222;margin-bottom:30px;border-bottom:1px solid #f0f0f0;padding-bottom:15px}.wrist-modal-header svg{color:#333}.wrist-modal-section{margin-bottom:25px}.section-label{font-size:14px;font-weight:600;color:#555;margin-bottom:12px;display:block}.suggest-label{font-size:12px;font-weight:400;color:#999;margin-left:4px}.wrist-input-wrapper{display:flex;align-items:center;background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;padding:5px 15px;transition:all .2s}.wrist-input-wrapper:focus-within{border-color:#222;background:#fff;box-shadow:0 0 0 3px #0000000d}#wrist-input-field{flex:1;border:none;background:transparent;padding:12px 0;font-size:18px;font-weight:600;color:#222;outline:none}.unit-label{font-size:14px;font-weight:600;color:#666;margin-left:10px}.style-options{display:flex;gap:12px}.style-option{flex:1;border:1px solid #e9ecef;border-radius:12px;padding:15px 12px;cursor:pointer;transition:all .2s;position:relative;display:flex;align-items:center;gap:10px}.style-option input[type=radio]{margin:0;accent-color:#222;width:18px;height:18px}.style-option.active{border-color:#222;background:#fff;box-shadow:0 4px 12px #0000000d}.style-title{font-size:14px;font-weight:700;color:#222;margin-bottom:2px}.style-desc{font-size:11px;color:#999}.wrist-modal-footer{margin-top:35px;text-align:center}.max-circum-info{display:inline-flex;align-items:center;gap:6px;background:#f8f9fa;padding:6px 15px;border-radius:20px;font-size:12px;color:#777;margin-bottom:20px}.max-circum-info svg{color:#999}.finish-btn{width:100%;background:#222;color:#fff;border:none;padding:15px;border-radius:30px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.finish-btn:hover{background:#000;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.finish-btn:active{transform:translateY(0)}
/*# sourceMappingURL=/cdn/shop/t/1/assets/diy-bracelet.css.map */