:root{--theme-bg-primary:#1a1a1a;--theme-bg-secondary:rgba(255, 255, 255, 0.05);--theme-bg-tertiary:rgba(0, 0, 0, 0.3);--theme-text-primary:#fff;--theme-text-secondary:#999;--theme-border:rgba(255, 255, 255, 0.1);--theme-hover-bg:rgba(255, 255, 255, 0.02);--share-card-width:1920px;--share-card-height:1080px;--steps-left:7%;--steps-width:38%;--steps-vertical-offset:8%;--steps-max-height:70%;--right-area-left:49%;--right-area-width:50%;--row1-height:42.5%;--row2-height:15%;--row3-height:42.5%;--initial-image-offset-x:-23%;--initial-image-offset-y:0%;--initial-info-offset-x:16%;--initial-info-offset-y:25%;--initial-info-width:55%;--materials-offset-x:0%;--materials-offset-y:33%;--materials-max-width:100%;--arrow-left-gap:11px;--arrow-right-gap:1px;--final-image-offset-x:-23%;--final-image-offset-y:0%;--final-info-offset-x:16%;--final-info-offset-y:-12%;--final-info-width:55%;--share-font-family:'Microsoft YaHei','PingFang SC',sans-serif;--font-step-number:calc(var(--share-card-width) * 0.008);--font-step-desc:calc(var(--share-card-width) * 0.008);--font-change-item:calc(var(--share-card-width) * 0.007);--font-change-prob:calc(var(--share-card-width) * 0.007);--font-item-name:calc(var(--share-card-width) * 0.016);--font-item-level:calc(var(--share-card-width) * 0.0075);--font-affix:calc(var(--share-card-width) * 0.0075);--font-affix-tier:calc(var(--share-card-width) * 0.006);--initial-image-size:calc(var(--share-card-width) * 0.11);--initial-image-offset-x:-24%;--initial-image-offset-y:28%;--final-image-size:calc(var(--share-card-width) * 0.11);--final-image-offset-x:-24%;--final-image-offset-y:-11%;--arrow-left-size:calc(var(--share-card-width) * 0.05);--arrow-right-size:calc(var(--share-card-width) * 0.05);--material-icon-size:calc(var(--share-card-width) * 0.02);--step-header-icon-size:calc(var(--share-card-width) * 0.013);--step-spacing:calc(var(--share-card-height) * 0.015);--step-padding:calc(var(--share-card-width) * 0.002);--material-gap:calc(var(--share-card-height) * 0.0036);--website-text-left:50%;--website-text-top:91.2%;--website-text-size:calc(var(--share-card-width) * 0.007);--custom-text-left:50%;--custom-text-top:88.8%;--custom-text-size:calc(var(--share-card-width) * 0.008);--class-image-size:50%;--class-image-top:52%;--class-image-opacity:0.25;--logo-image-width:40%;--logo-image-top:13%;--logo-image-left:50%;--logo-image-opacity:1}[data-theme=light]{--theme-bg-primary:#f5f5f5;--theme-bg-secondary:rgba(0, 0, 0, 0.05);--theme-bg-tertiary:rgba(255, 255, 255, 0.8);--theme-text-primary:#333;--theme-text-secondary:#666;--theme-border:rgba(0, 0, 0, 0.1);--theme-hover-bg:rgba(0, 0, 0, 0.05)}#share-image-page{display:flex;flex-direction:column;padding:20px;background:var(--theme-bg-primary);min-height:100%;width:100%;border-radius:16px}.share-page-header{display:flex;justify-content:center;align-items:center;margin-bottom:20px;padding:15px 20px;background:var(--theme-bg-secondary);border-radius:8px}.share-page-header h2{margin:0;color:var(--theme-text-primary);font-size:24px}.share-controls-row{display:flex;justify-content:center;align-items:center;gap:30px;margin:30px auto 20px;padding:0 20px;flex-wrap:wrap;max-width:1200px;z-index:1;position:relative}.export-button-container{display:flex;justify-content:center;align-items:center;margin:0;padding:0;gap:20px}.switch-section-title{display:none}.background-switch-container,.class-switch-container,.logo-switch-container{display:flex;justify-content:center;align-items:center;gap:4px;margin:0 auto 10px;padding:5px 0;flex-wrap:wrap;max-width:1200px}.bg-switch-btn,.class-switch-btn,.logo-switch-btn{width:80px;height:53px;padding:0;border:3px solid transparent;border-radius:6px;background:var(--theme-bg-tertiary);cursor:pointer;overflow:hidden;transition:.3s;position:relative;flex-shrink:0}.class-switch-btn{width:50px;height:50px;border-radius:50%}.logo-switch-btn{width:120px;height:40px;border-radius:4px}.bg-switch-btn img,.class-switch-btn img,.logo-switch-btn img{width:100%;height:100%;object-fit:contain;display:block}.bg-switch-btn img{object-fit:cover}.bg-switch-btn:hover,.class-switch-btn:hover,.logo-switch-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,122,255,.3);border-color:rgba(0,122,255,.5)}.bg-switch-btn.active,.class-switch-btn.active,.logo-switch-btn.active{border-color:#007aff;box-shadow:0 0 0 2px rgba(0,122,255,.2);transform:scale(1.05)}.bg-switch-btn.active::after,.class-switch-btn.active::after,.logo-switch-btn.active::after{content:'✓';position:absolute;top:2px;right:2px;width:16px;height:16px;background:#007aff;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}.share-action-btn{padding:10px 24px;border:none;border-radius:8px;cursor:pointer;font-size:15px;font-weight:600;transition:.2s;display:flex;align-items:center;gap:10px;box-shadow:0 2px 6px rgba(0,0,0,.1)}.share-action-btn.primary{background:#fff;color:#333;border:1px solid #e0e0e0;box-shadow:0 2px 8px rgba(0,0,0,.08)}.share-action-btn.primary:hover{background:#f8f9fa;border-color:#bdbdbd;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12)}.share-action-btn.secondary{background:#fff;color:#333;border:1px solid #e0e0e0;box-shadow:0 2px 8px rgba(0,0,0,.08)}.share-action-btn.secondary:hover{background:#f8f9fa;border-color:#bdbdbd;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12)}[data-theme=light] .share-action-btn.secondary{background:#fff;color:#333;border:1px solid #e0e0e0}#share-card-container{display:flex;justify-content:center;align-items:flex-start;padding:10px 0 20px;overflow:visible;width:100%;position:relative;z-index:1}@media (max-width:768px){#share-card-container{position:relative;top:auto;margin-bottom:-100px;pointer-events:auto}.share-controls-row{flex-direction:column;gap:15px}.custom-text-input-container{width:100%;box-sizing:border-box;flex-direction:column;align-items:flex-start;gap:8px}.custom-text-input-field{max-width:100%}}.share-card-placeholder{text-align:center;padding:60px 20px;color:var(--theme-text-secondary);font-size:16px}#share-card-content.share-card{width:var(--share-card-width);height:var(--share-card-height);min-width:var(--share-card-width);min-height:var(--share-card-height);max-width:var(--share-card-width);max-height:var(--share-card-height);flex-shrink:0;transform:scale(.82);transform-origin:top center;background-image:url('photo/1.1.avif');background-size:cover;background-position:center;background-repeat:no-repeat;background-color:transparent!important;position:relative;overflow:hidden;font-family:var(--share-font-family)!important;display:block!important;flex-direction:initial!important;padding:0!important;margin:0;border:none;border-radius:16px;box-shadow:none;pointer-events:auto}#share-card-content.share-card:hover{transform:scale(.82);box-shadow:none;border:none;border-radius:16px}.share-class-image{position:absolute;left:50%;top:var(--class-image-top);transform:translate(-50%,-50%);width:auto;height:var(--class-image-size);opacity:var(--class-image-opacity);pointer-events:none;z-index:0;mix-blend-mode:normal;object-fit:contain}.share-logo-image{position:absolute;left:var(--logo-image-left);top:var(--logo-image-top);transform:translate(-50%,-50%);width:var(--logo-image-width);height:auto;opacity:var(--logo-image-opacity);pointer-events:none;z-index:0;mix-blend-mode:normal;object-fit:contain}.share-operations-section{position:absolute;left:var(--steps-left);width:var(--steps-width);max-height:var(--steps-max-height);z-index:1;top:50%;transform:translateY(calc(-50% + var(--steps-vertical-offset)));display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;background:0 0;border:none;border-radius:0;margin:0;padding:0;box-sizing:border-box}.operations-list{display:flex;flex-direction:column;gap:0}.operation-item{background:0 0;border:none;border-radius:0;padding:var(--step-padding);padding-bottom:var(--step-spacing);margin-bottom:0;transition:.2s;display:flex;align-items:center;gap:calc(var(--share-card-width) * .005);position:relative;width:100%;box-sizing:border-box}.operation-item::after{display:none}.operation-item:hover:not(.simplified){background:rgba(255,255,255,.02)}.operation-item.simplified{opacity:.4}.operation-item.simplified .operation-changes,.operation-item.simplified .operation-currency-icons{display:none}.operation-content{display:flex;flex-direction:column;gap:calc(var(--share-card-height) * .0057);flex:1;min-width:0;overflow:hidden}.operation-header{display:flex;align-items:center;gap:calc(var(--share-card-width) * .004);max-width:100%;overflow:hidden}.operation-number{color:#afafaf;font-weight:600;font-size:var(--font-step-number);flex-shrink:0}.operation-desc{color:#afafaf;font-size:var(--font-step-desc);font-weight:600;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.operation-header-icons{display:flex;align-items:center;gap:calc(var(--share-card-width) * .002);margin-left:calc(var(--share-card-width) * .003)}.operation-header-icon{width:var(--step-header-icon-size);height:var(--step-header-icon-size);flex-shrink:0}.operation-header-icon img{width:100%;height:100%;object-fit:contain}.operation-changes{display:flex;flex-direction:column;gap:calc(var(--share-card-height) * .0038);margin-left:calc(var(--share-card-width) * .005)}.change-item{display:flex;align-items:center;gap:calc(var(--share-card-width) * .003);font-size:var(--font-change-item);font-weight:700;line-height:1.4}.change-label{font-weight:600;flex-shrink:0}.change-label.remove{color:#680808;font-weight:700}.change-label.add{color:#026618;font-weight:700}.change-label.lock{color:#f59e0b;font-weight:700}.change-affix{color:#afafaf;font-weight:700}.change-prob{color:#afafaf;font-size:var(--font-change-prob);font-weight:550;font-style:normal;flex-shrink:0}.custom-note-display{color:#afafaf;font-size:calc(var(--share-card-width) * .0065);padding:calc(var(--share-card-height) * .0025) calc(var(--share-card-width) * .002);background:0 0;font-weight:550;border-left:none;border-radius:0;display:flex;align-items:center;gap:calc(var(--share-card-width) * .001);margin-top:calc(var(--share-card-height) * .001)}.operation-item.simplified .custom-note-display{display:flex;opacity:1}.operation-item.more{color:#afafaf;text-align:center;font-style:italic}.operation-currency-icons{display:none}.right-area-container{position:absolute;left:var(--right-area-left);top:0;width:var(--right-area-width);height:100%;display:flex;flex-direction:column;z-index:1}.row1-container{height:var(--row1-height);width:100%;display:flex;justify-content:center;align-items:center;position:relative;overflow:visible}.initial-equipment-image{position:absolute;left:calc(50% + var(--initial-image-offset-x));top:calc(50% + var(--initial-image-offset-y));transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center}.initial-equipment-info{position:absolute;left:calc(50% + var(--initial-info-offset-x));top:calc(50% + var(--initial-info-offset-y));transform:translate(-50%,-50%);width:var(--initial-info-width);display:flex;flex-direction:column;justify-content:center;overflow:visible}.row2-container{height:var(--row2-height);width:100%;display:flex;justify-content:center;align-items:center;position:relative;overflow:visible}.materials-center-container{position:relative;max-width:var(--materials-max-width);display:flex;justify-content:center;align-items:center;transform:translate(var(--materials-offset-x),var(--materials-offset-y))}.arrow-left-container{order:1;display:flex;justify-content:center;align-items:center;flex-shrink:0;white-space:nowrap;margin-right:var(--arrow-left-gap)}.materials-list{order:2;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:calc(var(--share-card-width) * .005);overflow:hidden}.arrow-right-container{order:3;display:flex;justify-content:center;align-items:center;flex-shrink:0;white-space:nowrap;margin-left:var(--arrow-right-gap)}.row3-container{height:var(--row3-height);width:100%;display:flex;justify-content:center;align-items:center;position:relative;overflow:visible}.final-equipment-image{position:absolute;left:calc(50% + var(--final-image-offset-x));top:calc(50% + var(--final-image-offset-y));transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center}.final-equipment-info{position:absolute;left:calc(50% + var(--final-info-offset-x));top:calc(50% + var(--final-info-offset-y));transform:translate(-50%,-50%);width:var(--final-info-width);display:flex;flex-direction:column;justify-content:center;overflow:visible}.state-item-image{display:flex;align-items:center;justify-content:center;background-color:rgba(50,50,50,.3);border-radius:4px}.initial-equipment-image .state-item-image{width:var(--initial-image-size);height:var(--initial-image-size)}.final-equipment-image .state-item-image{width:var(--final-image-size);height:var(--final-image-size)}.state-item-image img{max-width:100%;max-height:100%;object-fit:contain}.state-item-name{font-size:var(--font-item-name);font-weight:600;text-align:center;margin-bottom:calc(var(--share-card-height) * .005);word-break:break-word}.state-item-name.rarity-normal{color:#e0e0e0}.state-item-name.rarity-magic{color:#4fc3f7}.state-item-name.rarity-rare{color:#ffeb3b}.state-item-level{font-size:var(--font-item-level);color:#999;font-weight:550;text-align:center;margin-bottom:calc(var(--share-card-height) * .0105)}.state-affixes{width:100%;font-size:var(--font-affix);font-weight:550;line-height:1.4;display:flex;flex-direction:column;align-items:center;padding-right:calc(var(--share-card-width) * .01)}.state-empty{color:#666;text-align:center;padding:calc(var(--share-card-height) * .0095)}.affix-item{display:flex;align-items:center;gap:calc(var(--share-card-width) * .0025);padding:calc(var(--share-card-height) * .0029) calc(var(--share-card-width) * .0025);margin:calc(var(--share-card-height) * .0019) 0;border-radius:3px}.affix-tier{color:#999;font-size:var(--font-affix-tier);font-weight:550;flex-shrink:0;width:calc(var(--share-card-width) * .01);display:flex;align-items:center;justify-content:center}.affix-item.prefix .affix-tier{color:#f44}.affix-item.suffix .affix-tier{color:#87ceeb}.affix-item.corrupted .affix-tier{color:#ff9800}.affix-desc{color:#88f;flex:1;word-break:break-word;text-align:center}.affix-item.abyss .affix-desc{color:#4caf50!important}.affix-item.ruptured .affix-desc{color:#ff9800!important}.arrow-image{max-width:none;height:auto;object-fit:contain;display:block}.arrow-left-container .arrow-image{width:var(--arrow-left-size);min-width:10px}.arrow-right-container .arrow-image{width:var(--arrow-right-size);min-width:10px}.materials-center{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.materials-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:calc(var(--share-card-width) * .002)}.materials-empty{color:#666;font-size:calc(var(--share-card-width) * .008)}.material-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--share-card-width) * .001)}.material-icon{width:var(--material-icon-size);height:var(--material-icon-size);object-fit:contain;flex-shrink:0}.material-multiply{color:#ccc;font-size:calc(var(--share-card-width) * .01);font-weight:700;margin:0 calc(var(--share-card-width) * .001)}.material-count{color:silver;font-size:calc(var(--share-card-width) * .01);font-weight:700}.material-text{font-size:calc(var(--share-card-width) * .01);color:#fff}.material-item.more{color:#999;font-size:calc(var(--share-card-width) * .0045);margin-top:calc(var(--share-card-height) * .0018)}.share-equipment-area{display:none!important}.share-watermark{position:absolute;bottom:10px;right:20px;color:rgba(255,255,255,.3);font-size:12px;font-weight:500}.share-website-text{position:absolute;left:var(--website-text-left);top:var(--website-text-top);transform:translate(-50%,-50%);font-size:var(--website-text-size);font-weight:700;color:rgba(126,0,0,.9);text-shadow:2px 2px 4px rgba(0,0,0,.5);pointer-events:none;user-select:none;z-index:1000;white-space:nowrap}.share-custom-text{position:absolute;left:var(--custom-text-left);top:var(--custom-text-top);transform:translate(-50%,-50%);font-size:var(--custom-text-size);font-weight:600;color:rgba(126,0,0,.9);text-shadow:2px 2px 6px rgba(0,0,0,.6);pointer-events:none;user-select:none;z-index:1001;white-space:nowrap}.steps-edit-controls{margin-top:20px;padding:20px;background:var(--theme-bg-secondary);border-radius:8px;max-width:1000px;margin-left:auto;margin-right:auto}.edit-controls-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--theme-border)}.edit-controls-header h3{margin:0;color:var(--theme-text-primary);font-size:18px}.btn-close-edit{padding:6px 12px;background:var(--theme-bg-tertiary);color:var(--theme-text-primary);border:1px solid var(--theme-border);border-radius:4px;cursor:pointer;font-size:13px;transition:.2s}.btn-close-edit:hover{background:var(--theme-hover-bg)}.position-controls-group{background:var(--theme-bg-tertiary);border-radius:6px;padding:10px;margin-bottom:15px}.spacing-control{display:flex;align-items:center;gap:12px;padding:10px;margin-bottom:8px}.spacing-control:last-child{margin-bottom:0}.spacing-control label{color:var(--theme-text-primary);font-size:14px;font-weight:500;min-width:80px}.spacing-control input[type=range]{flex:1;height:6px;background:rgba(255,255,255,.2);border-radius:3px;outline:0;cursor:pointer}.spacing-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#007aff;border-radius:50%;cursor:pointer;transition:.2s}.spacing-control input[type=range]::-webkit-slider-thumb:hover{background:#0051d5;transform:scale(1.2)}.spacing-control input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#007aff;border-radius:50%;border:none;cursor:pointer;transition:.2s}.spacing-control input[type=range]::-moz-range-thumb:hover{background:#0051d5;transform:scale(1.2)}.spacing-control span{color:#007aff;font-size:14px;font-weight:700;min-width:30px;text-align:right}.steps-modification-header{margin-top:20px;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--theme-border);min-height:1px}.steps-modification-header h4{display:none}.custom-text-input-container{display:flex;justify-content:center;align-items:center;gap:12px;margin:0;padding:10px 20px;background:var(--theme-bg-secondary);border-radius:8px}.custom-text-input-container label{color:var(--theme-text-primary);font-size:14px;font-weight:500;white-space:nowrap}.custom-text-input-field{padding:8px 14px;background:var(--theme-bg-tertiary);border:1px solid var(--theme-border);border-radius:6px;color:var(--theme-text-primary);font-size:14px;outline:0;width:100%;max-width:350px;transition:.2s}.custom-text-input-field:focus{border-color:#007aff;background:var(--theme-hover-bg);box-shadow:0 0 0 3px rgba(0,122,255,.1)}.custom-text-input-field::placeholder{color:var(--theme-text-secondary);font-size:13px}.custom-text-counter{color:var(--theme-text-secondary);font-size:13px;min-width:45px;font-weight:500}.editable-steps-list{display:flex;flex-direction:column;gap:10px;max-height:600px;overflow-y:auto}.editable-step-item{background:var(--theme-bg-tertiary);border-radius:6px;padding:12px;cursor:pointer;transition:.2s;user-select:none}.editable-step-item:hover{background:var(--theme-hover-bg);transform:translateY(-1px)}.editable-step-item.hidden{opacity:.5}.step-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.step-visibility-checkbox{width:18px;height:18px;cursor:pointer}.step-main-content{flex:1;display:flex;align-items:center;gap:8px}.step-number{color:#f5a623;font-weight:600;font-size:13px}.step-action-text{color:var(--theme-text-primary);font-size:13px}.step-details{margin-left:28px;color:var(--theme-text-secondary);font-size:11px;line-height:1.5}.step-detail-line{padding:2px 0}.custom-note-section{margin-top:8px;margin-left:28px}.custom-note-input{width:100%;padding:6px 10px;background:var(--theme-bg-tertiary);border:1px solid var(--theme-border);border-radius:4px;color:var(--theme-text-primary);font-size:12px;outline:0}.custom-note-input:focus{background:var(--theme-hover-bg);border-color:#007aff}.custom-note-input::placeholder{color:var(--theme-text-secondary)}.editable-steps-list::-webkit-scrollbar,.equipment-info::-webkit-scrollbar,.share-operations-section::-webkit-scrollbar{width:6px}.editable-steps-list::-webkit-scrollbar-track,.equipment-info::-webkit-scrollbar-track,.share-operations-section::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:3px}.editable-steps-list::-webkit-scrollbar-thumb,.equipment-info::-webkit-scrollbar-thumb,.share-operations-section::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}.editable-steps-list::-webkit-scrollbar-thumb:hover,.equipment-info::-webkit-scrollbar-thumb:hover,.share-operations-section::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}