.share-image-page{padding:20px;background-color:#f5f5f5;min-height:100%}.page-header{display:flex;justify-content:center;align-items:center;margin-bottom:30px;padding:0 20px}.page-header h2{margin:0;color:#333;font-size:24px}.page-actions{display:flex;gap:10px}.card-bottom-actions{display:flex;flex-direction:column;gap:12px;margin-top:20px;padding:20px;max-width:320px;margin-left:auto;margin-right:auto}.card-bottom-actions .action-btn.primary{width:100%;padding:20px 32px;background:linear-gradient(135deg,#e3f2fd,#bbdefb);color:#4684cbea;border:1px solid #90caf9;border-radius:16px;cursor:pointer;font-size:19px;font-weight:600;transition:all .3s cubic-bezier(.25, .8, .25, 1);box-shadow:0 3px 12px rgba(83,171,243,.2);position:relative;overflow:hidden;min-height:70px}.card-bottom-actions .action-btn.primary:hover{background:linear-gradient(135deg,#bbdefb,#90caf9);color:#3577dc;transform:translateY(-3px);box-shadow:0 6px 20px rgba(33,150,243,.3)}.card-bottom-actions .action-btn.primary:active{transform:translateY(0);background:linear-gradient(135deg,#90caf9,#64b5f6);box-shadow:0 1px 4px rgba(58,161,245,.2)}.secondary-buttons{display:flex;gap:12px}.card-bottom-actions .action-btn:not(.primary){flex:1;padding:12px 20px;background:#fff;color:#424242;border:2px solid #e0e0e0;border-radius:10px;cursor:pointer;font-size:15px;font-weight:500;transition:all .3s cubic-bezier(.25, .8, .25, 1);box-shadow:0 2px 6px rgba(0,0,0,.08)}.card-bottom-actions .action-btn:not(.primary):hover{background:#f8f9fa;border-color:#bdbdbd;color:#212121;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.12)}.card-bottom-actions .action-btn:not(.primary):active{transform:translateY(0);background:#f5f5f5;box-shadow:0 1px 3px rgba(0,0,0,.1)}.card-bottom-actions .action-btn.secondary.green{background:linear-gradient(135deg,#e8f5e8,#c8e6c9)!important;color:#2e7d32!important;border:1px solid #a5d6a7!important;box-shadow:0 2px 8px rgba(76,175,80,.15)!important}.card-bottom-actions .action-btn.secondary.green:hover{background:linear-gradient(135deg,#c8e6c9,#a5d6a7)!important;color:#1b5e20!important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(76,175,80,.25)!important}.card-bottom-actions .action-btn.secondary.green:active{transform:translateY(0);background:linear-gradient(135deg,#a5d6a7,#81c784)!important;box-shadow:0 1px 4px rgba(76,175,80,.2)!important}.card-bottom-actions .action-btn.primary.edit{background:linear-gradient(135deg,#f5a623,#e89f1f);color:#fff;border:none;font-weight:600;font-size:18px;padding:22px 40px;min-height:60px;width:100%;margin:10px 0}.card-bottom-actions .action-btn.primary.edit:hover{background:linear-gradient(135deg,#e89f1f,#d48e1a);transform:translateY(-2px)}.card-bottom-actions .action-btn.primary.edit.active{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.card-bottom-actions .action-btn.primary.edit.active:hover{background:linear-gradient(135deg,#45a049,#3d8b40)}.action-btn{padding:10px 20px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s}.action-btn:hover{background:#f8f9fa;border-color:#007bff;color:#007bff}.share-card-wrapper{display:flex;justify-content:center;padding:20px}.share-card{width:1500px;min-height:400px;max-height:2400px;height:auto;background:#2a2a2a;border-radius:12px;padding:15px;box-shadow:0 4px 12px rgba(0,0,0,.15);position:relative;display:flex;gap:10px;align-items:stretch}.left-section{flex:1;display:flex;align-items:center;gap:15px;min-height:100%}.item-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}.item-image-container{width:240px;height:240px;background:#1a1a1a;border:2px solid #444;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;overflow:hidden}.item-state.initial .item-image-container.normal{border-color:#fff}.item-state.initial .item-image-container.magic{border-color:#4fc3f7}.item-state.initial .item-image-container.rare{border-color:#ffeb3b}.item-state.final .item-image-container.normal{border-color:#fff}.item-state.final .item-image-container.magic{border-color:#4fc3f7}.item-state.final .item-image-container.rare{border-color:#ffeb3b}.item-state.initial .item-image-container:not(.normal):not(.magic):not(.rare){border-color:#ffeb3b}.item-state.final .item-image-container:not(.normal):not(.magic):not(.rare){border-color:#ffeb3b}.item-image{max-width:100%;max-height:100%;object-fit:contain}.item-display-name{font-size:1.2rem;font-weight:500;color:#ffeb3b;margin:8px 0 4px 0;text-align:center;padding:4px 16px;position:relative;background-image:url('left.webp'),url('right.webp'),url('mid.webp');background-repeat:no-repeat,no-repeat,repeat-x;background-position:left center,right center,center center;background-size:auto 100%,auto 100%,200px 100%;min-height:32px;min-width:180px;display:flex;align-items:center;justify-content:center;z-index:1}.item-display-name.normal{color:#fff!important}.item-display-name.magic{color:#4fc3f7!important}.item-display-name.rare{color:#ffeb3b!important}.item-display-level{font-size:.9rem;color:#ccc;font-weight:400;margin-top:6px;margin-bottom:4px;text-align:center;font-style:italic}.item-separator-line{width:80%;height:2px;background:linear-gradient(to right,transparent,#ffeb3b,transparent);margin:4px 0 8px 0}.item-affixes{color:#fff;font-size:12px;line-height:1.4;width:105%;text-align:center}.item-affixes .placeholder{color:#666;text-align:center;padding:5px}.affix-item{padding:2px 4px;margin:3px 0;border-radius:3px;font-size:12px;display:flex;align-items:center}.affix-tier{color:#999;font-size:10px;width:20px;text-align:left;margin-right:4px;flex-shrink:0}.affix-content{flex:1;text-align:center;color:#88f}.affix-item.corrupted .affix-content{color:#ff9800}.affix-item.ruptured .affix-content{color:#ff9800!important}.affix-item.desecrated .affix-content{color:#4caf50!important}.affix-item.prefix .affix-tier{color:#f44}.affix-item.suffix .affix-tier{color:#87ceeb}.affix-item.abyss .affix-tier,.affix-item.abyss-prefix .affix-tier,.affix-item.abyss-suffix .affix-tier,.affix-item.desecrated .affix-tier{color:#4caf50}.transition-area{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 5px;flex:0.55;height:100%}.arrow-section{margin:10px 0;display:flex;justify-content:center;align-items:center}.arrow-img{width:80px;height:auto;display:block!important}.arrow-text{display:none!important}.materials-section{text-align:center;margin:10px 0}.materials-title{display:none}.materials-list{background:rgba(255,255,255,.05);border-radius:6px;padding:8px;min-width:120px}.material-item{color:#4caf50;padding:2px 0;font-size:12px;display:flex;align-items:center;justify-content:center;gap:5px}.material-icon{width:20px;height:20px;object-fit:contain}.materials-arrow-section{margin-top:15px;display:flex;justify-content:center;align-items:center}.materials-arrow-img{width:80px;height:auto;display:block}.right-section{flex:1.05;display:flex;flex-direction:column;background:rgba(255,255,255,.05);border-radius:8px;padding:12px;min-height:100%;max-height:2200px;overflow-y:auto}.operation-title{display:none}.operations-list{color:#ccc;font-size:13px;line-height:1.5;flex:1;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-start;max-height:2060px}.operation-item{display:flex;align-items:flex-start;gap:8px;padding:4px 6px;margin:3px 0;background:rgba(255,255,255,.05);border-radius:4px}.operation-content{flex:1}.operation-step{color:#f5a623;font-weight:700;font-size:14px;margin-bottom:3px;display:flex;align-items:center;gap:5px}.step-number{color:#f5a623}.currency-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:50px;height:50px;background:rgba(209,206,206,.384);border-radius:8px;border:1px solid rgba(255,255,255,.1);margin-top:2px;padding:4px;gap:2px;flex-wrap:wrap}.currency-icon{width:36px;height:36px;object-fit:contain;border-radius:3px;flex-shrink:0}.currency-icon.multi-icon{width:36px;height:36px;border-radius:3px}.currency-icon-container.multi-icons{width:auto;max-width:180px;min-height:50px}.step-action{color:#f5a623}.operation-detail{color:#999;font-size:11px;line-height:1.3;margin-left:6px}.operation-detail.change-detail{color:#4caf50;margin-top:2px}.operation-item.success{border-left-color:#4caf50}.operation-item.failed{border-left-color:#f44336}.operation-item.simplified{opacity:.6;background:rgba(255,255,255,.02)}.operation-item.simplified .operation-step{color:#999}.operation-item.simplified .step-action,.operation-item.simplified strong{color:#999;font-weight:400}.stat-item{display:flex;align-items:center;gap:8px}.stat-label{color:#999;font-size:13px}.stat-value{color:#fff;font-size:14px;font-weight:500}.card-bottom-actions .action-btn.primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s}.card-bottom-actions .action-btn.primary:hover::before{left:100%}@media (max-width:768px){.card-bottom-actions{max-width:280px;padding:16px;gap:10px}.card-bottom-actions .action-btn.primary{padding:18px 24px;font-size:17px;min-height:54px;border-radius:14px}.card-bottom-actions .action-btn:not(.primary){padding:10px 16px;font-size:14px}.secondary-buttons{gap:10px}}@media (max-width:1024px){.share-card{width:100%;max-width:1000px;grid-template-columns:1fr;grid-template-rows:auto auto auto}.transition-area{flex-direction:row;justify-content:space-around;padding:20px 0}.arrow-section{margin-bottom:0}.statistics-bar{position:relative;margin-top:20px;border-radius:8px}}.share-card .item-name{color:#fff;font-size:16px;font-weight:700;text-align:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #444}.share-card .item-name.normal{color:#fff}.share-card .item-name.magic{color:#4fc3f7}.share-card .item-name.rare{color:#ffeb3b}.share-title-banner{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:#f5a623;color:#2a2a2a;padding:8px 30px;border-radius:20px;font-weight:700;font-size:18px;box-shadow:0 2px 8px rgba(0,0,0,.2)}.watermark{position:absolute;bottom:10px;right:20px;color:#666;font-size:10px;opacity:.7}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.share-card{animation:fadeIn .3s ease-out}.affixes-container{max-height:800px;overflow-y:auto;padding-right:5px;flex:1}.affixes-container::-webkit-scrollbar{width:6px}.affixes-container::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:3px}.affixes-container::-webkit-scrollbar-thumb{background:#666;border-radius:3px}.affixes-container::-webkit-scrollbar-thumb:hover{background:#888}