*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif;font-size:14px;color:#050505;background:#fff;-webkit-tap-highlight-color:transparent;overflow:hidden}
button,input{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer}em{font-style:normal}.hidden{display:none!important}
.app{position:relative;height:100%;max-width:480px;margin:0 auto;overflow:hidden;background:#fff}
.main-content{position:fixed;z-index:20;top:0;left:0;right:0;bottom:42vh;max-width:480px;margin:0 auto;padding:10px 15px 0;background:#fff}
.top-info-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.guide-btn{height:26px;padding:0 14px;border-radius:20px;background:#1f4d46;color:#fff;font-size:12px}.status-info{display:flex;align-items:center;gap:8px;color:#666;font-size:12px}.status-tag{padding:3px 10px;border-radius:12px;background:rgba(174,182,188,.15);color:#050505;font-size:11px}.price-text{color:#050505;white-space:nowrap}
.center-workspace{position:absolute;top:35px;left:0;right:0;height:calc(58vh - 35px);display:flex;align-items:center;justify-content:center;pointer-events:none}.circle-wrap,.circle-area{pointer-events:auto}.circle-area{position:relative;width:200px;height:200px}.dashed-circle{position:absolute;inset:0;border:2px dashed #aeb6bc;border-radius:50%;transform-origin:center;touch-action:none}.center-logo{position:absolute;z-index:0;top:50%;left:50%;width:126px;height:126px;transform:translate(-50%,-50%);background:url("https://shuijingmini.oss-cn-shanghai.aliyuncs.com/workbench/zhushishunyi/2026-07-21T10-06-58-152Z/workbench-center-logo-original.png") center/contain no-repeat;pointer-events:none}
.component-on-circle{position:absolute;z-index:1;transform:translate3d(-50%,-50%,0);transition:left .4s cubic-bezier(.34,1.56,.64,1),top .4s cubic-bezier(.34,1.56,.64,1),opacity .25s;user-select:none}.component-on-circle.selected{z-index:10;filter:drop-shadow(0 0 9px rgba(5,5,5,.72))}.component-on-circle.selected .component-wrapper:not(.animating):not(.settling){transform:scale(1.05)}.component-on-circle.dragging{opacity:.35;pointer-events:none}.component-wrapper{display:flex;align-items:center;justify-content:center;transform-origin:center}.component-wrapper.animating{animation:beadFlyIn .7s cubic-bezier(.22,1,.36,1) forwards}.component-wrapper.settling{animation:beadSettle .5s cubic-bezier(.34,1.56,.64,1) forwards}.component-image{display:block;background-position:center;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.15)) drop-shadow(0 5px 8px rgba(0,0,0,.1));transition:transform .4s cubic-bezier(.34,1.56,.64,1),width .4s cubic-bezier(.34,1.56,.64,1),height .4s cubic-bezier(.34,1.56,.64,1);transform-origin:center}@keyframes beadFlyIn{0%{transform:translateY(200px) scale(.4);opacity:0;filter:blur(2px)}30%{opacity:.7;filter:blur(0)}60%{transform:translateY(-6px) scale(1.08);opacity:1}80%{transform:translateY(2px) scale(.97)}100%{transform:translateY(0) scale(1);opacity:1}}@keyframes beadSettle{0%{transform:scale(.6);opacity:.4}50%{transform:scale(1.15);opacity:1}80%{transform:scale(.96)}100%{transform:scale(1);opacity:1}}
.drag-target-indicator{display:none;position:absolute;z-index:6;width:22px;height:22px;border:2px solid #1f4d46;border-radius:50%;transform:translate3d(-50%,-50%,0);box-shadow:0 0 0 4px rgba(31,77,70,.14);pointer-events:none}.drag-ghost{position:fixed;z-index:3000;transform:translate(-50%,-50%);pointer-events:none}.drag-ghost-inner{background-position:center;background-repeat:no-repeat;background-size:contain}
.info-column{position:absolute;z-index:5;right:20px;bottom:10%;display:flex;flex-direction:column;align-items:flex-end;gap:5px}.info-item{display:flex;flex-direction:column;align-items:flex-end}.info-label{margin-bottom:1px;color:#9aa3a9;font-size:9px}.info-value{font-size:10px}.complete-btn{position:absolute;z-index:30;top:55px;right:5px;width:60px;height:25px;border-radius:13px;background:#1f4d46;color:#fff;font-size:12px;box-shadow:0 2px 6px rgba(31,77,70,.18)}.save-btn{position:absolute;z-index:30;top:85px;right:5px;width:60px;height:25px;border:1px solid #1f4d46;border-radius:13px;background:transparent;color:#1f4d46;font-size:12px}.complete-btn.wide{position:static;width:calc(100% - 32px);height:40px;margin:12px 16px 0;border-radius:8px}
.wuxing-panel{position:absolute;z-index:100;left:50%;bottom:25px;width:215px;transform:translateX(-50%)}.wuxing-columns{display:flex;align-items:flex-end;justify-content:space-between;height:75px;padding:0 9px}.wuxing-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:26px;gap:3px}.wuxing-bar-bg{display:flex;align-items:flex-end;width:8px;height:54px;overflow:hidden;border-radius:999px;background:#f0f0f0}.wuxing-bar-fill{display:block;width:100%;height:0;border-radius:999px;transition:height .3s}.gold-fill{background:linear-gradient(to top,#ffd700,#fff176)}.wood-fill{background:linear-gradient(to top,#388e3c,#81c784)}.water-fill{background:linear-gradient(to top,#1976d2,#64b5f6)}.fire-fill{background:linear-gradient(to top,#d32f2f,#ef9a9a)}.earth-fill{background:linear-gradient(to top,#795548,#bcaaa4)}.wuxing-label{font-size:9px;font-weight:500}.gold-label{color:#b8860b}.wood-label{color:#2e7d32}.water-label{color:#1565c0}.fire-label{color:#c62828}.earth-label{color:#4e342e}.wuxing-col.active-filter .wuxing-label{font-weight:700;text-decoration:underline}
.toolbox-container{position:absolute;z-index:20;left:15px;bottom:20px;display:flex;flex-direction:column;align-items:center;gap:8px}.tool-item-wrapper,.toolbox-wrapper,.tool-item-wrap{display:flex;flex-direction:column;align-items:center;gap:3px}.side-icon-btn,.toolbox-icon,.tool-item-circle{width:35px;height:35px;border-radius:50%;background-color:rgba(255,255,255,.96);background-position:center;background-repeat:no-repeat;box-shadow:0 2px 8px rgba(31,77,70,.12)}.side-icon-btn{display:flex;align-items:center;justify-content:center}.side-icon-btn.active,.toolbox-icon.active{background-color:rgba(31,77,70,.12);box-shadow:0 0 0 1px rgba(31,77,70,.2),0 2px 8px rgba(31,77,70,.12)}.side-icon{width:21px;height:21px;background:center/contain no-repeat}.toolbox-text,.tool-item-wrap span{margin-top:3px;color:#1f4d46;font-size:9px}.toolbox-wrapper{position:relative}.tools-dropdown{position:absolute;z-index:10;top:0;left:45px;display:flex;flex-direction:row;gap:12px;opacity:0;visibility:hidden;transition:all .25s}.tools-dropdown.active{opacity:1;visibility:visible}.toolbox-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d46' stroke-width='2'%3E%3Cpath d='M3 3h18v18H3z'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");background-size:60%}.wrist-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d46' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpolyline points='12 9 12 12 14 14'/%3E%3C/svg%3E")}.attr-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d46' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='12' y1='2' x2='12' y2='6'/%3E%3Cline x1='12' y1='18' x2='12' y2='22'/%3E%3C/svg%3E")}#btnMoveUp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d46' stroke-width='2'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E")}#btnMoveDown{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d46' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}.flip-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d46' stroke-width='2'%3E%3Cpath d='M7 16V4M7 4L3 8M7 4l4 4M17 8v12M17 20l4-4M17 20l-4-4'/%3E%3C/svg%3E")}.delete-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d46' stroke-width='2'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E")}.clear-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4d46' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E")}
.components-selector{position:absolute;z-index:10;top:58vh;left:0;right:0;width:100%;max-width:480px;height:42vh;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;border-top-left-radius:20px;border-top-right-radius:20px;background:#fff;box-shadow:0 -2px 15px rgba(174,182,188,.1)}.components-selector.drag-delete-hint-visible{background-color:rgba(255,59,48,.03);border-top:1px dashed rgba(255,59,48,.2)}.components-selector.delete-zone-active{background-color:rgba(255,59,48,.08);border-top:1px solid rgba(255,59,48,.35)}.delete-zone-tip{position:absolute;z-index:30;top:8px;left:50%;transform:translateX(-50%);padding:8px 20px;border-radius:18px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;white-space:nowrap}.delete-zone-tip.active{background:#ff3b30}
.main-tabs{display:flex;align-items:center;height:45px;padding:0 10px;overflow-x:auto;border-bottom:1px solid rgba(174,182,188,.1);scrollbar-width:none}.main-tabs::-webkit-scrollbar{display:none}.main-tab{position:relative;flex:1 0 56px;height:45px;padding:0 8px;color:#9aa3a9;font-size:13px;white-space:nowrap}.main-tab.active{color:#1f4d46;font-weight:500}.main-tab.active::after{content:"";position:absolute;left:35%;bottom:0;width:30%;height:2px;background:#1f4d46}.search-icon{flex:0 0 40px;height:45px;color:#1f4d46;font-size:16px}.tip-bar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:6px 12px;background:#fff9db;color:#666;font-size:11px}.tip-close{color:#1f4d46;font-size:14px}.selector-body{display:flex;flex:1;overflow:hidden}.sub-tabs-vertical{flex:0 0 70px;overflow-y:auto;background:#f9f9f9;-webkit-overflow-scrolling:touch}.cat-item{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 8px;color:#9aa3a9;font-size:12px;text-align:center}.cat-item.active{background:linear-gradient(to right,rgba(255,255,255,.5),#fff 30%);color:#1f4d46;font-weight:500}.main-tabs.disabled,.sub-tabs-vertical.disabled{pointer-events:none;opacity:.45}
.components-grid{position:relative;flex:1;overflow:hidden}.components-wrapper{display:flex;flex-wrap:wrap;align-content:flex-start;height:100%;padding:3px;overflow-y:auto;-webkit-overflow-scrolling:touch}.loading-box,.empty-box{display:flex;align-items:center;justify-content:center;width:100%;height:100px;color:#9aa3a9;font-size:13px}.component-item{width:33.333%;padding:4px}.component-card{position:relative;display:flex;flex-direction:column;height:110px;overflow:hidden;border:1px solid rgba(245,245,245,.8);border-radius:8px;background:#fff;box-shadow:0 2px 6px rgba(174,182,188,.08)}.component-card:active{opacity:.85}.stock-badge{position:absolute;z-index:2;top:4px;right:4px;padding:2px 5px;border-radius:4px;font-size:9px;line-height:1.2}.stock-badge.out-of-stock{background:rgba(0,0,0,.55);color:#fff}.stock-badge.low-stock{background:rgba(255,59,48,.9);color:#fff}.component-preview{display:flex;align-items:center;justify-content:center;width:100%;height:60px;overflow:hidden;padding:4px}.component-preview .component-image{width:100%;height:100%;filter:none}.component-info{display:flex;flex:1;flex-direction:column;align-items:center;padding:4px 6px 6px}.component-name{width:100%;overflow:hidden;color:#050505;font-size:12px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.component-price{color:#050505;font-size:11px}.component-size,.component-material-info{max-width:100%;margin-top:2px;padding:2px 6px;overflow:hidden;border-radius:2px;background:rgba(174,182,188,.08);color:#9aa3a9;font-size:10px;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.modal-mask{position:fixed;z-index:1000;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.5)}.wrist-popup{width:85%;max-width:320px;overflow:hidden;padding-bottom:16px;border-radius:12px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.2)}.wrist-popup-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #f0f0f0}.wrist-popup-title{font-size:16px;font-weight:600}.wrist-popup-close{color:#1f4d46;font-size:22px}.wrist-popup-body{padding:20px 16px}.wrist-field label{display:block;margin-bottom:8px;color:#666;font-size:13px}.wrist-input{width:100%;height:40px;margin-bottom:16px;padding:0 12px;border:1px solid #ddd;border-radius:8px;font-size:16px}.wear-style{display:flex;gap:12px}.wear-btn{flex:1;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:14px;text-align:center}.wear-btn.active{border-color:#1f4d46;background:#1f4d46;color:#fff}
.guide-modal{position:relative;display:flex;flex-direction:column;width:100%;max-width:400px;max-height:80vh;overflow:hidden;border-radius:16px;background:#fff}.guide-tabs{display:flex;overflow-x:auto;padding:16px 40px 0 12px;border-bottom:1px solid #f0f0f0;scrollbar-width:none}.guide-tab{flex-shrink:0;padding:0 12px 14px;color:#999;font-size:13px;white-space:nowrap}.guide-tab.active{border-bottom:2px solid #1f4d46;color:#1f4d46;font-weight:600}.guide-close{position:absolute;top:14px;right:14px;color:#1f4d46;font-size:20px}.guide-content{flex:1;overflow-y:auto;padding:12px}.guide-content img{display:block;width:100%;border-radius:6px}.guide-pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #f0f0f0}.page-btn{padding:6px 18px;border-radius:20px;background:#1f4d46;color:#fff;font-size:13px}.page-btn:disabled{background:#edf3f1;color:#9aa3a9;opacity:1}
.component-detail-area{position:absolute;z-index:5;inset:0;overflow-y:auto;background:#fff;-webkit-overflow-scrolling:touch}.detail-header{position:sticky;z-index:2;top:0;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #f0f0f0;background:#fff}.back-to-list{display:flex;align-items:center;justify-content:center;width:32px;height:32px}.back-icon-small{display:block;width:10px;height:10px;margin-left:4px;border-left:2px solid #1f4d46;border-bottom:2px solid #1f4d46;transform:rotate(45deg)}.detail-add-btn{padding:6px 18px;border-radius:16px;background:#1f4d46;color:#fff;font-size:13px}.detail-content{padding:12px 14px 20px}.detail-top{display:flex;gap:12px;margin-bottom:14px}.detail-image{width:88px;height:88px;border-radius:8px;background:#fafafa center/contain no-repeat}.detail-main-info{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center;gap:4px}.detail-name{color:#050505;font-size:15px;font-weight:600;line-height:1.3}.detail-price{color:#050505;font-size:16px;font-weight:600}.detail-basic-info{display:flex;gap:10px;margin-top:2px;color:#9aa3a9;font-size:12px}.detail-compact-info{margin-bottom:14px;padding:10px 12px;border-radius:8px;background:#fafafa}.detail-info-row{display:flex;gap:16px}.detail-info-item{display:flex;flex:1;flex-direction:column;gap:4px}.detail-label,.detail-desc-title{color:#9aa3a9;font-size:11px}.detail-value{color:#050505;font-size:13px}.detail-description{margin-bottom:14px}.detail-desc-title{display:block;margin-bottom:6px}.detail-desc-content{color:#333;font-size:13px;line-height:1.6}.real-image-container{display:block;width:100%;overflow:hidden;border-radius:8px}.real-image{display:block;width:100%;height:160px;background:#f5f5f5 center/cover no-repeat}
.image-preview-mask{position:fixed;z-index:4000;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.92)}.image-preview-viewport{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;touch-action:none}.image-preview-viewport img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .05s linear}.image-preview-close{position:absolute;z-index:2;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:50%;background:rgba(31,77,70,.82);color:#fff;font-size:28px}
.search-modal{position:fixed;left:50%;bottom:0;display:flex;flex-direction:column;width:100%;max-width:480px;height:70vh;transform:translateX(-50%);border-radius:16px 16px 0 0;background:#fff}.search-header{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:12px 16px;border-bottom:1px solid #f0f0f0}.search-input{flex:1;height:36px;padding:0 12px;border:1px solid #ddd;border-radius:18px;background:#f8f8f8}.search-close{color:#1f4d46;font-size:22px}.search-results{display:flex;flex-wrap:wrap;align-content:flex-start;flex:1;overflow-y:auto;padding:8px}
.toast{position:fixed;z-index:5000;top:50%;left:50%;max-width:78vw;padding:12px 24px;transform:translate(-50%,-50%);border-radius:8px;background:rgba(0,0,0,.75);color:#fff;font-size:14px;text-align:center;pointer-events:none}
@media (min-width:481px){.main-content{left:50%;right:auto;width:480px;transform:translateX(-50%)}.components-selector{left:50%;right:auto;transform:translateX(-50%)}}

/* Stable guide modal: keep tabs and action buttons clear of the close button. */
.guide-modal{height:min(82vh,680px);max-height:min(82vh,680px)}
.guide-tabs{width:calc(100% - 56px);min-height:52px;margin-right:0;padding:12px 0 0 12px;align-items:flex-end}
.guide-tab{height:40px;padding:0 12px 12px;border-bottom:2px solid transparent;line-height:28px}
.guide-tab.active{border-bottom-color:#1f4d46}
.guide-close{top:8px;right:10px;z-index:4;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#edf3f1;color:#1f4d46;font-size:24px;line-height:1}
.guide-content{min-height:360px;contain:layout paint}
.guide-content img{width:100%;min-height:320px;object-fit:contain;background:#fafafa}
.guide-pagination{min-height:56px;flex-shrink:0}