*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}
body{position:relative;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);color:#e2e8f0;min-height:100vh;padding:10px;z-index:0;}
body::before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;background-image:url('../images/body_bg.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;filter:blur(12px) brightness(0.7);pointer-events:none;}
.container{max-width:1500px;margin:0 auto;}
header{text-align:center; width: 100%; position: relative;margin: 0 auto 20px;}
h1{font-size:2.8rem;margin-bottom:10px;background:#fff;-webkit-background-clip:text;color:#ffffff00;}
.subtitle ul{display:flex;justify-content:center;}
.subtitle ul li{list-style:none;margin:0 7px;border-radius:4px;padding:6px 17px;font-size:14px;}
.subtitle ul li:first-child{background:#795548;color:#fff;}
.subtitle ul li:last-child{background:#d5904130;}
.main-content{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:30px;}
.shiwan-icon{position: absolute;left: 30%;width: 90px;top: -5px}
/* 左侧面板 */
.left-panel{flex:1;min-width:350px;max-width:440px;display:flex;flex-direction:column;gap:10px;}

/* 哈夫币样式 */
.equipment-library{background:rgba(15,23,42,0.7);border-radius:15px;border:1px solid rgba(148,163,184,0.2);box-shadow:0 10px 25px rgba(0,0,0,0.3);height:630px;display:flex;flex-direction:column;}
.section-title{font-size:18px;color:#fff;border-bottom:2px solid rgba(96,165,250,0.3);display:flex;align-items:center;gap:10px;padding:20px 25px 10px;}
.section-title i{font-size:18px;}
.equipment-tabs{display:flex;border-bottom:1px solid rgba(148,163,184,0.2);}
.equipment-tab{flex:1;padding:12px;background:transparent;border:none;color:#94a3b8;font-size:14px;font-weight:400;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:8px;}
.equipment-tab:hover{background:rgba(96,165,250,0.1);color:#cbd5e1;}
.equipment-tab.active{background:rgba(96,165,250,0.2);color:#ffffff;border-bottom:3px solid #ffffff;font-weight:600;}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(251,191,36,0.7);}
    70%{box-shadow:0 0 0 10px rgba(251,191,36,0);}
    100%{box-shadow:0 0 0 0 rgba(251,191,36,0);}
}
.equipment-item.locked{opacity:0.5;cursor:not-allowed;filter:grayscale(70%);}
.lock-icon{position:absolute;top:5px;right:5px;color:#f87171;font-size:0.9rem;}
.equipment-image{margin-bottom:10px;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;width:60px;height:60px;background:rgba(15,23,42,0.8);padding:10px;}
.equipment-image img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;}
.rarity-common{background-color:rgba(148,163,184,0.3);color:#94a3b8;}
.rarity-uncommon{background-color:rgba(34,211,238,0.3);color:#22d3ee;}
.rarity-rare{background-color:rgba(139,92,246,0.3);color:#8b5cf6;}
.rarity-epic{background-color:rgba(236,72,153,0.3);color:#ec4899;}
.rarity-legendary{background-color:rgba(245,158,11,0.3);color:#f59e0b;}
.level-history-panel{background:rgba(15,23,42,0.7);border-radius:15px;border:1px solid rgba(148,163,184,0.2);box-shadow:0 10px 25px rgba(0,0,0,0.3);height:580px;display:flex;flex-direction:column;}
.history-tabs{display:flex;border-bottom:1px solid rgba(148,163,184,0.2);margin-bottom:20px;}
.history-tab{flex:1;padding:12px;background:transparent;border:none;color:#94a3b8;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:8px;}
.history-tab:hover{background:rgba(96,165,250,0.1);color:#cbd5e1;}
.history-tab.active{background:rgba(96,165,250,0.2);color:#60a5fa;border-bottom:3px solid #60a5fa;}
.history-content{flex:1;overflow-y:auto;padding:15px 15px 20px;}
.level-history-list{display:flex;flex-direction:column;gap:15px;}
.level-history-item{background:rgba(30,41,59,0.9);border-radius:10px;padding:15px;border:1px solid rgba(148,163,184,0.2);transition:all 0.3s ease;cursor:pointer;}
.level-history-item:hover{border-color:#60a5fa;transform:translateY(2px);box-shadow:0 5px 15px rgba(96,165,250,0.2);}
.level-history-item.active{border-color:#60a5fa;background:rgba(96,165,250,0.1);}
.level-history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:14px;color:#94a3b8;}
.level-history-name{font-weight:bold;color:#cbd5e1;font-size:1.1rem;}
.level-history-date{color:#94a3b8;font-size:0.85rem;}
.level-history-stats{display:flex;justify-content:space-between;font-size:14px;color:#ffffff;margin-bottom:15px;}
.level-history-actions{display:flex;gap:10px;}
.grid-container{flex:2;min-width:600px;background:rgba(15,23,42,0.7);border-radius:15px;padding:25px;border:1px solid rgba(148,163,184,0.2);box-shadow:0 10px 25px rgba(0,0,0,0.3);position:relative;}
.grid-backpack{width:980px;height:845px;position:relative;margin:0 auto;overflow:hidden;transition:background 0.3s;margin-top:-45px;}

/* 网格单元格样式 */
.grid-cell{position:absolute;background-color:rgba(51,65,85,0.7);border-radius:4px;transition:all 0.2s;border:1px solid rgba(255,255,255,0.1);}
.grid-cell.invalid{background-color:rgba(30,41,59,0.3);visibility:hidden;}
.grid-cell.occupied{background-color:rgba(96,165,250,0.1);z-index:1;}
.grid-cell.highlight{background-color:rgba(96,165,250,0.6);box-shadow:0 0 8px rgba(96,165,250,0.7);z-index:2;}

/* 装备图片覆盖层 */
.equipment-overlay{position:absolute;z-index:10;pointer-events:none;border-radius:4px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.3);border:2px solid rgba(255,255,255,0.2);background-color:rgba(15,23,42,0.8);display:flex;align-items:center;justify-content:center;}
.equipment-overlay img{width:80%;height:80%;object-fit:contain;display:block;}
.status-panel{flex-basis:100%;background:rgba(15,23,42,0.7);border-radius:15px;padding:25px;border:1px solid rgba(148,163,184,0.2);box-shadow:0 10px 25px rgba(0,0,0,0.3);}
.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-bottom:25px;margin-top:120px;}
.stat-item{display:flex;flex-direction:column;align-items:center;padding:20px;background:rgba(30,41,59,0.9);border-radius:12px;min-width:180px;border:1px solid rgba(96,165,250,0.2);}
.stat-value{font-size:2.2rem;font-weight:bold;color:#60a5fa;margin-top:5px;}
.stat-label{font-size:1.1rem;color:#94a3b8;}
.instructions{padding:20px;background:rgba(30,41,59,0.6);border-radius:12px;line-height:1.6;margin-bottom:20px;}
.instructions h3{color:#60a5fa;margin-bottom:15px;display:flex;align-items:center;gap:10px;}
.instructions ul{padding-left:25px;color:#cbd5e1;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;}
.instructions li{margin-bottom:8px;padding-left:5px;}
.btn{padding:8px 24px;background:linear-gradient(90deg,#60a5fa,#8b5cf6);color:white;border:none;border-radius:50px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;gap:8px;}
.btn:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,0.4);background:linear-gradient(90deg,#60a5fa,#8b5cf6);}
.btn-green{background:linear-gradient(90deg,#10b981,#059669);}
.btn-green:hover{background:linear-gradient(90deg,#34d399,#10b981);}
.btn-blue{background:linear-gradient(90deg,#3b82f6,#2563eb);}
.btn-blue:hover{background:linear-gradient(90deg,#60a5fa,#3b82f6);}
.btn-orange{background:#ff9800;}
.btn-orange:hover{background:linear-gradient(90deg,#fb923c,#f97316);}
.btn-red{background:linear-gradient(90deg, #F62660FF, #F91656FF);}
.btn-red:hover{background:linear-gradient(90deg,#F62660FF,#F91656FF);}
.btn-group{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-top:20px;position:relative;z-index:9;}
.backpack-strap{position:absolute;width:60px;height:20px;background:linear-gradient(to right,#7c3aed,#8b5cf6);border-radius:10px;top:-25px;left:50%;transform:translateX(-50%);z-index:1;box-shadow:0 4px 8px rgba(0,0,0,0.3);}
.notification{position:fixed;top:20px;right:20px;padding:15px 20px;background:rgba(30,41,59,0.95);border-left:4px solid #60a5fa;
    border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.3);transform:translateX(150%);transition:transform 0.3s ease;max-width:350px;z-index: 999999}
.notification.show{transform:translateX(0);}
.notification-title{font-weight:bold;color:#60a5fa;margin-bottom:5px;display:flex;align-items:center;gap:8px;}
.notification-message{color:#cbd5e1;font-size:0.95rem;}
.empty-state{text-align:center;padding:40px 20px;color:#94a3b8;}
.empty-state i{font-size:3rem;margin-bottom:15px;opacity:0.5;}
.empty-state p{font-size:1.1rem;}
.game-round-badge{display:inline-block;background:linear-gradient(90deg,#60a5fa,#8b5cf6);color:white;padding:4px 10px;border-radius:20px;font-size:15px;font-weight:bold;margin-right:10px;}
.new-badge{position:absolute;top:-5px;left:-5px;background:#fbbf24;color:#0f172a;font-size:0.7rem;font-weight:bold;padding:2px 6px;border-radius:10px;z-index:5;}
.level-badge{display:inline-block;background:linear-gradient(90deg,#f59e0b,#f97316);color:white;padding:4px 10px;border-radius:20px;font-size:0.8rem;font-weight:bold;margin-right:10px;}

/* 拖拽提示 */
.drag-hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(15,23,42,0.9);padding:20px;border-radius:15px;border:2px solid #60a5fa;z-index:1001;text-align:center;max-width:400px;display:none;}
.drag-hint.show{display:block;animation:fadeIn 0.3s ease;}
@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}
.drag-hint h3{color:#60a5fa;margin-bottom:10px;}
.drag-hint p{color:#cbd5e1;margin-bottom:15px;}
.drag-hint-close{position:absolute;top:10px;right:10px;background:transparent;border:none;color:#94a3b8;font-size:1.2rem;cursor:pointer;}

/* 自定义装备图片容器 */
.custom-equipment-image{width:100%;height:60px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;position:relative;}
.custom-equipment-image span{font-size:2rem;color:#60a5fa;}
.custom-equipment-image.small span{font-size:1.5rem;}
.custom-equipment-image.medium span{font-size:2rem;}
.custom-equipment-image.large span{font-size:2.5rem;}
.size-indicator{position:absolute;bottom:5px;right:5px;background:rgba(0,0,0,0.6);color:white;padding:2px 5px;border-radius:3px;font-size:0.7rem;}
.drag-preview{position:absolute;top:0;left:0;z-index:1000;pointer-events:none;opacity:0.8;display:none;}

/* 整个滚动条 */
::-webkit-scrollbar{width:12px; /* 滚动条的宽度 */height:12px; /* 滚动条的高度 */}

/* 滚动条轨道 */
::-webkit-scrollbar-track{background:#313030; /* 轨道颜色 */}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb{background:#555; /* 滑块颜色 */border-radius:10px; /* 滑块圆角 */}

/* 滑块悬停时 */
::-webkit-scrollbar-thumb:hover{background:#555; /* 滑块悬停时的颜色 */}

/* 保存布局弹窗样式 */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:none;justify-content:center;align-items:center;z-index:2000;}
.modal-overlay.show{display:flex;}
.modal{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border-radius:15px;padding:30px;width:90%;max-width:500px;box-shadow:0 15px 35px rgba(0,0,0,0.5);border:1px solid rgba(96,165,250,0.3);}
.modal-header{margin-bottom:25px;display:flex;align-items:center;gap:10px;}
.modal-header i{font-size:22px;color:#60a5fa;}
.modal-title{font-size:20px;color:#60a5fa;font-weight:600;}
.modal-body{margin-bottom:25px;}
.form-group{margin-bottom:20px;}
.form-label{display:block;margin-bottom:8px;color:#cbd5e1;font-weight:500;}
.form-input{width:100%;padding:12px 15px;background:rgba(30,41,59,0.8);border:2px solid rgba(148,163,184,0.3);border-radius:10px;color:#e2e8f0;font-size:1rem;transition:all 0.3s ease;}
.form-input:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,0.2);}
.form-input::placeholder{color:#94a3b8;}
textarea.form-input{resize:vertical;min-height:80px;}
.modal-footer{display:flex;justify-content:flex-end;gap:15px;}
.modal-stats{background:rgba(30,41,59,0.6);padding:15px;border-radius:10px;margin-bottom:20px;display:flex;justify-content:space-between;}
.stat-item-small{text-align:center;}
.stat-value-small{font-size:1.2rem;font-weight:bold;color:#60a5fa;}
.stat-label-small{font-size:0.8rem;color:#94a3b8;margin-top:5px;}
.btn-gray{background:linear-gradient(90deg,#475569,#334155);color:#cbd5e1;}
.btn-gray:hover{background:linear-gradient(90deg,#64748b,#475569);color:#f1f5f9;}
.equipment-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto;padding:12px 20px;flex:1;height:500px;}
.equipment-item{display:flex;flex-direction:column;align-items:center;padding:15px;background:rgb(71 76 105);border-radius:12px;cursor:grab;transition:all 0.3s ease;border:2px solid transparent;width:120px;position:relative;max-height:182px;}
.equipment-item:hover{transform:translateY(-5px);border-color:#60a5fa;box-shadow:0 5px 15px rgba(96,165,250,0.3);}
.equipment-item.dragging{opacity:0.7;cursor:grabbing;}
.equipment-name{font-size:0.9rem;font-weight:600;color:#cbd5e1;text-align:center;margin-bottom:8px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.equipment-rarity{font-size:0.8rem;padding:2px 8px;border-radius:10px;font-weight:bold;}

/* 品质颜色 */
.rarity-red{background-color:rgba(239,68,68,0.3);color:#ef4444;}
.rarity-gold{background-color:rgba(245,158,11,0.3);color:#f59e0b;}


/* 修改按钮样式 */
.btn-small{font-size: 0.85rem;padding: 6px 20px!important;}
.btn-edit{background:linear-gradient(135deg,#f59e0b,#d97706);color:white;border:none;}
.btn-edit:hover{background:linear-gradient(135deg,#f59e0b,#d97706);}
.full-bag-message{width:700px;margin:0 auto;position:relative;}
.bag-full-box{display:flex;justify-content:space-between;padding:10px 18px 3px;background:#5e4741;border-radius:10px;align-items:center;}
.bag-full-info{width:500px;}
.bag-full-info ul{display:flex;}
.bag-full-info ul li{margin-right:15px;list-style:none;color:#dedede;font-size:13px;line-height:26px;width:120px;}
.bag-full-info ul li span{color:#f0940d;font-weight:500;font-size:28px;}
.bag-full-info ul li:last-child{width:242px}
.bag-full-actions{width:220px;font-size:13px;line-height:30px;color:#dedede;}
.bag-full-qrcode{font-size:13px;line-height:26px;color:#fff;text-align:center;}
.bag-full-qrcode img{width:90px;height:90px;vertical-align:middle;border-radius:6px;}
.bag-full-details{width:540px;}
.bag-full-ids{display:flex;border-bottom:1px solid #7c5b53;padding-bottom:8px;margin-bottom:5px;font-size:14px;font-weight:500;color:#fff;}
.bag-full-info-actions{display:flex;}
.baotiH3{text-align:center;font-size:32px;border-bottom:1px solid #4f4a4a;padding-bottom:16px;}

/*右侧浮动的公众号*/
#qr-sidebar{position:fixed;top:70%;right:10px;transform:translateY(-50%);width:150px;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border-radius:12px;padding:10px;box-shadow:0 10px 25px rgb(255 255 255 / 30%);z-index:1000;border:2px solid #ffffff;text-align:center;transition:all 0.3s ease}
#qr-sidebar:hover{transform:translateY(-50%) scale(1.05);box-shadow:0 15px 30px rgba(81,81,112,0.5)}
#qr-sidebar h3{font-size:16px;margin-bottom:10px;color:#FF9800;font-weight:600}
.qr-code{width:120px;height:120px;background-color:#fff;padding:5px;border-radius:8px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.qr-placeholder{width:110px;height:110px;position:relative;display:flex;align-items:center;justify-content:center}
.qr-text{font-size:13px;line-height:1.4;margin-bottom:8px}
.qr-highlight{color:#FF9800;font-weight:600}
.qr-company{font-size:11px;background:rgba(108,140,255,0.2);padding:4px 8px;border-radius:4px;margin-top:8px;color:#8ca3ff;border:1px solid rgba(108,140,255,0.4)}
.btn-delete{background:#ef4705}
.btn-delete:hover{background:#ef4705}

button{padding:8px 24px;border:none;border-radius:6px;background:linear-gradient(to right,#7b4397,#dc2430);color:white;font-weight:bold;cursor:pointer;transition:all 0.3s;font-size:1rem;}
button:hover{transform:translateY(-3px);box-shadow:0 7px 14px rgba(0,0,0,0.3);}
button:active{transform:translateY(-1px);}
button:disabled{opacity:0.6;cursor:not-allowed;transform:none;background:linear-gradient(to right,#555,#777);}
.deleteTit {margin-bottom: 20px;}

.input-disabled{opacity: 1;cursor: not-allowed;background-color: #1c2638;border-color: #404c5f;color: #ffffff;}
.input-disabled:focus{background-color: #1c2638;border-color: #404c5f;cursor: not-allowed;box-shadow:none;}




@media (max-width:1200px){
    .main-content{flex-direction:column-reverse;gap:5px;}
    .left-panel{min-width:100%;max-width:100%;flex-direction:row;}
    .equipment-library,
    .level-history-panel{flex:1;min-width:300px;}
    .grid-container{min-width:100%;padding:5px;}
    .grid-backpack{width:375px;height:375px;padding:10px;}
}
@media (max-width:992px){
    .left-panel{flex-direction:column;}
    .equipment-library,
    .level-history-panel{width:100%;}
}
@media (max-width:768px){
    body{margin: 0;padding: 0;min-height:auto}
    .container{width: 100%;max-width: 100%;padding: 0;margin: 0;}
    .grid-backpack{width:375px;height:375px;padding:0;margin-top:0;}
    .baotiH3{font-size:18px;padding-bottom:3px;display: none}
    h1{font-size:18px;margin-bottom:3px;}
    .instructions ul{grid-template-columns:1fr;}
    .stat-item{min-width:110px;padding:10px;}
    .stat-label{font-size:14px}
    .stat-value{font-size:16px;margin-top:0;}
    .btn-group{flex-wrap:nowrap;margin-top: 0}
    .btn{min-width:88px;padding:5px 10px;font-size:12px;}
    .equipment-tabs,
    .history-tabs{margin-bottom:5px;}
    .equipment-tab,
    .history-tab{padding:4px;}
    .equipment-item{width: 56px;
        padding: 0;
        background: none;}
    .equipment-image{width: 56px;height: 56px;padding: 4px;margin-bottom: 0;}
    .stats{flex-wrap:nowrap;}
    #qr-sidebar{display:none}
    .equipment-name{font-size:12px;}
    .equipment-list{gap: 6px;height: 202px;align-content: flex-start;}
    .equipment-rarity{display: none}
    .equipment-size{display: none}
    .history-content{padding:5px;height: 400px;flex: unset;}
    .section-title{margin-bottom:0;padding:5px 25px;font-size:15px;display: none}
    .subtitle ul li{font-size:12px;padding:3px 7px;}
    .stats{margin-top:0;margin-bottom: 0}
    header{margin:10px 0;width: 100%}
    body::before {background-image: none;position: unset}
    .equipment-name{display: none}
    .full-bag-message{width: 100%}
    .bag-full-box{padding: 10px; /* 移动端增大内边距 */border-radius:12px;flex-direction: column; /* 增大圆角 */}
    .bag-full-info ul li{width:100%;   margin-right:0; }
    .bag-full-qrcode img{width:140px;height:140px;}
    .bag-full-info-actions {display: flex;flex-direction: column;}

    .bag-full-details{width: 100%}
    .bag-full-actions{display: flex;justify-content: space-between;margin: 0;text-align: left;width: 100%;}
    .bag-full-actions p{width: 100%}
    .bag-full-info{margin-bottom: 0;width: 100%;}
    .bag-full-info ul li:last-child{width: 100%}
    .shiwan-icon{position: absolute;left: 22%;width: 40px;top:-5px;}
    button {font-size: 12px;padding: 7px;}


}