*{margin:0;padding:0;box-sizing:border-box}body{font-family:Microsoft YaHei,sans-serif;background:#1a1c2e;color:#fff;padding:15px 20px}.container{background:#1a1c2e;max-width:1400px;margin:0 auto}h1{text-align:center;color:gold;margin-bottom:20px;text-shadow:0 0 20px rgba(255,215,0,.3);font-size:24px}h2{margin-bottom:15px;color:gold;font-size:16px}.main{display:flex;gap:15px;max-width:1400px;margin:0 auto;height:calc(100vh - 100px);align-items:flex-start}.library{width:260px;display:flex;flex-direction:column}.library-section{flex:1;display:flex;flex-direction:column;overflow:hidden}.filter-btns{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}.filter-btn{padding:5px 10px;border:1px solid #444;background:#ffffff1a;color:#aaa;border-radius:15px;cursor:pointer;font-size:12px;transition:all .3s}.filter-btn.active,.filter-btn:hover{background:gold;color:#000;border-color:gold}.search-input{width:100%;padding:8px 12px;border:1px solid #444;border-radius:4px;font-size:14px;background:#ffffff1a;color:#fff;box-sizing:border-box}.search-input:focus{outline:none;border-color:gold;box-shadow:0 0 0 2px #ffd70040}.search-input::placeholder{color:#888}.scroll-list{height:500px;overflow-y:auto;padding-right:5px}.scroll-list::-webkit-scrollbar{width:6px}.scroll-list::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.hero-card-list{display:flex;flex-direction:column;gap:8px}.hero-card-item{display:flex;background:#ffffff0d;border:1px solid #444;border-radius:8px;padding:10px;cursor:pointer;transition:all .2s;align-items:center}.hero-card-item:hover{background:#ffd7001a;border-color:gold;transform:translate(3px)}.hero-img-wrap{width:80px;height:80px;flex-shrink:0;margin-right:10px}.hero-img-wrap img{width:100%;height:100%;border-radius:6px;border:2px solid #555;object-fit:cover;background:#2c3e50}.img-placeholder{width:100%;height:100%;border-radius:6px;border:2px dashed #555;background:#3c3e4d;display:flex;align-items:center;justify-content:center;text-align:center;color:#666;font-size:12px;font-weight:700}.team-img-placeholder{width:100%;height:100%;border-radius:8px;border:2px dashed #555;background:#505261;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-size:18px;font-weight:700}.hero-card-item:hover .img-placeholder{border-color:gold}.hero-image:hover .team-img-placeholder{border-color:#3498db}.hero-card-item:hover .hero-img-wrap img{border-color:gold}.hero-info-wrap{flex:1;display:flex;flex-direction:column;gap:4px}.hero-name{font-size:16px;font-weight:700;color:gold}.hero-camp{font-size:11px;color:#aaa}.camp-badge{padding:2px 6px;border-radius:3px;font-size:10px;font-weight:700}.camp-yongwu{background:#e74c3c;color:#fff}.camp-tongshuai{background:#f39c12;color:#fff}.camp-zhimou{background:#3498db;color:#fff}.unit-type-badge{padding:2px 6px;border-radius:3px;font-size:10px;font-weight:700;background:#9b59b6;color:#fff;margin-top:5px;display:inline-block}.hero-stats-row{display:flex;gap:10px;font-size:11px}.hero-stat{color:#ccc;display:flex;align-items:center;gap:3px}.stat-label{color:#888}.stat-value{font-weight:700}.stat-atk{color:#e74c3c}.stat-def{color:#3498db}.skills-library{width:200px;display:flex;flex-direction:column}.skill-text-list{display:flex;flex-direction:column;gap:6px}.skill-text-item{background:#ffffff0d;border:1px solid #444;border-radius:6px;padding:10px 12px;cursor:pointer;transition:all .2s;display:flex;gap:10px}.skill-text-item:hover{background:#ffd7001a;border-color:gold;transform:translate(3px)}.skill-name{font-size:16px;font-weight:700;color:#e0e0e0}.skill-type-tag{font-size:12px;padding:2px 8px;border-radius:10px;display:inline-block;width:fit-content}.type-zhudong{background:#e74c3c;color:#fff}.type-zhuiji{background:#f39c12;color:#fff}.type-zhihui{background:#3498db;color:#fff}.type-beidong{background:#2ecc71;color:#fff}.type-zhujiang{background:#9b59b6;color:#fff}.type-zhenfa{background:#1abc9c;color:#fff}.type-bingfa{background:#8e44ad;color:#fff}.team{flex:1;display:flex;flex-direction:column;padding-top:0;min-width:500px}.team-slots{display:flex;gap:15px;justify-content:flex-start;padding-top:10px;padding-left:10px;padding-right:10px;min-height:280px;flex-wrap:wrap}.hero-card{width:280px;text-align:center;flex-shrink:0}.slot{background:#ffffff0d;padding:15px;border-radius:10px;border:2px solid transparent;min-height:240px;cursor:pointer;transition:all .2s;position:relative}.slot:hover{border-color:transparent!important;box-shadow:none!important}.slot.selected{border-color:#3498db;box-shadow:0 0 15px #3498db80}.slot.filled{border-color:#333}.hero-grid-layout{display:grid;grid-template-columns:125px 115px;grid-template-rows:auto auto auto auto auto;gap:10px;align-items:stretch}.hero-image{position:relative;width:125px;height:190px;border-radius:8px;overflow:hidden;background:#2c3e50;cursor:pointer}.hero-image img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}.hero-image:hover img{opacity:.8;filter:brightness(.7)}.hero-image:hover{border:2px solid #3498db;box-shadow:0 0 10px #3498db4d;border-radius:8px}.delete-overlay{position:absolute;inset:0;background:#e74c3c99;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;pointer-events:none;border-radius:8px}.hero-image:hover .delete-overlay{opacity:.8;filter:brightness(.7)}.equipment-slot,.horse-slot{padding:10px;border:1px solid #444;border-radius:6px;background:#ffffff1a;cursor:pointer;transition:all .3s ease;text-align:center;min-height:36px;width:115px;display:flex;align-items:center;justify-content:center;border:2px dashed #666}.equipment-slot:hover,.horse-slot:hover{border-color:#2ecc71;box-shadow:0 0 5px #2ecc714d;opacity:.8;filter:brightness(.7)}.empty-equipment,.empty-horse{color:#888;font-size:13px}.equipment-text,.horse-text{font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skill-slot{border:2px dashed #666;border-radius:6px;background:#ffffff1a;cursor:pointer;transition:all .2s ease;text-align:center;min-height:36px;width:115px;display:flex;align-items:center;justify-content:center;padding:0 10px;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none}.skill-slot:hover{border-color:#2ecc71;box-shadow:0 0 5px #2ecc714d;opacity:.8;filter:brightness(.7)}.skill-slot.has-skill{border-style:solid;border-color:#2ecc71;background:#2ecc711a}.skill-slot.empty{background:#ffffff1a;border-style:dashed;color:#888}.skill-slot.empty:before{content:"";color:#888;font-size:13px;white-space:nowrap}.skill-slot.selected{border-style:solid;border-color:#3498db;box-shadow:0 0 10px #3498db80}.skill-slot.has-skill:after{content:"长按看详情";position:absolute;right:5px;top:2px;font-size:9px;color:#fff6;line-height:1;pointer-events:none}.skill-slot.has-skill:hover .skill-text{opacity:0}.skill-slot.has-skill:hover:before{content:"× 点击删除";position:absolute;inset:0;background:#e74c3c99;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;z-index:2}.skill-text{font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}@media(max-width:768px){.hero-grid-layout{grid-template-columns:1fr;grid-template-rows:auto}.hero-image{grid-column:1!important;grid-row:auto!important;margin:0 auto}.equipment-slot,.horse-slot,.skill-slot{grid-column:1!important;grid-row:auto!important}.empty-hero-image{grid-column:1!important;grid-row:auto!important;margin:0 auto}.empty-equipment-slot,.empty-horse-slot,.empty-skill-slot{grid-column:1!important;grid-row:auto!important}}.empty-hero-layout{width:100%;display:grid;grid-template-columns:125px 115px;grid-template-rows:auto auto auto auto auto;gap:10px;align-items:stretch}.empty-hero-image{position:relative;width:125px;height:190px;border-radius:8px;overflow:hidden;background:#ffffff1a;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;border:2px dashed #666}.empty-hero-image:hover{background:#ffffff26}.empty-hero-text{font-size:14px;font-weight:700;color:#666;line-height:1.4}.empty-equipment-slot,.empty-horse-slot{padding:10px;border:2px dashed #666;border-radius:6px;background:#ffffff1a;cursor:pointer;transition:all .2s ease;text-align:center;min-height:36px;display:flex;align-items:center;justify-content:center}.empty-equipment-slot:hover,.empty-horse-slot:hover{border-color:#2ecc71;box-shadow:0 0 5px #2ecc714d;background:#ffffff26}.empty-skill-slot{border:2px dashed #666;border-radius:6px;background:#ffffff1a;cursor:pointer;transition:all .2s ease;text-align:center;min-height:36px;display:flex;align-items:center;justify-content:center;padding:0 10px;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none}.empty-skill-slot:hover{border-color:#2ecc71;box-shadow:0 0 5px #2ecc714d;background:#ffffff26}.empty-skill-slot:before{content:"";color:#888;font-size:13px;white-space:nowrap}.empty-slot-text{font-size:13px;color:#888}.actions{text-align:center;margin-top:20px}.btn{padding:10px 30px;border:none;border-radius:5px;cursor:pointer;font-size:14px}.btn-danger{background:#e74c3c;color:#fff}.message-toast{position:fixed;top:50%;left:50%;transform:translate(-50%) translateY(-50%) scale(.8);background:#000c;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;z-index:1100;opacity:0;transition:all .3s ease;pointer-events:none}.message-toast.active{transform:translate(-50%) translateY(-50%) scale(1);opacity:1}.footer-note{position:fixed;bottom:10px;right:calc(50% - 680px);font-size:11px;color:#fff9;text-align:right;z-index:999;pointer-events:none;max-width:500px}.skill-modal{display:none;position:fixed;inset:0;background:#000c;z-index:1000;justify-content:center;align-items:center}.skill-modal.active{display:flex}.skill-modal-content{background:#2c3e50;border:2px solid #ffd700;border-radius:12px;padding:25px;width:380px;height:400px;position:relative;overflow-y:auto}.skill-modal-content::-webkit-scrollbar{width:8px}.skill-modal-content::-webkit-scrollbar-thumb{background:#444;border-radius:4px}.skill-modal-title{font-size:20px;color:gold;margin-bottom:15px;text-align:center}.skill-modal-type{display:inline-block;color:#fff;padding:3px 12px;border-radius:12px;font-size:12px;margin-bottom:15px}.skill-modal-desc{line-height:1.8;color:#ddd;font-size:14px;margin-bottom:15px}.skill-modal-stats{background:#0000004d;padding:12px;border-radius:8px;font-size:13px}.skill-modal-stat{display:flex;justify-content:space-between;margin-bottom:8px}.skill-modal-stat:last-child{margin-bottom:0}.skill-modal-exchange{margin-top:15px;background:#0000004d;padding:12px;border-radius:8px;font-size:13px}.skill-modal-exchange-title{font-weight:700;color:gold;margin-bottom:8px}.skill-modal-exchange-content{color:#ddd;line-height:1.4}.skill-modal-close{position:absolute;top:10px;right:15px;background:none;border:none;color:#fff;font-size:24px;cursor:pointer}.hero-modal{display:none;position:fixed;inset:0;background:#000c;z-index:1000;justify-content:center;align-items:center}.hero-modal.active{display:flex}.hero-modal-content{background:#2c3e50;border:2px solid #ffd700;border-radius:12px;padding:25px;width:400px;height:500px;position:relative;overflow-y:auto}.hero-modal-content::-webkit-scrollbar{width:8px}.hero-modal-content::-webkit-scrollbar-thumb{background:#444;border-radius:4px}.hero-modal-header{display:flex;align-items:center;gap:15px;margin-bottom:20px}.hero-modal-img{width:80px;height:80px;border-radius:8px;border:2px solid #ffd700;object-fit:cover}.hero-modal-title{font-size:22px;color:gold;margin-bottom:5px}.hero-modal-camp{font-size:12px}.hero-modal-body{display:flex;flex-direction:column;gap:15px}.hero-stats-section{background:#0000004d;padding:12px;border-radius:8px}.hero-stats-title{font-size:14px;color:gold;margin-bottom:10px;font-weight:700}.hero-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.hero-stat-item{display:flex;justify-content:space-between;font-size:13px}.hero-skill-section{background:#0000004d;padding:12px;border-radius:8px}.hero-skill-title{font-size:14px;color:gold;margin-bottom:10px;font-weight:700}.hero-skill-name{font-size:16px;color:#fff;margin-bottom:5px}.hero-skill-type{font-size:11px;padding:2px 8px;border-radius:10px;display:inline-block;margin-bottom:8px}.hero-skill-desc{font-size:13px;color:#ddd;line-height:1.6}.hero-modal-close{position:absolute;top:10px;right:15px;background:none;border:none;color:#fff;font-size:24px;cursor:pointer}