*,::after,::before{box-sizing:border-box}
body,html{background:#f4f6f8;margin:0;padding:0}
.app-container{color:#333;font-family:system-ui,sans-serif;margin:0 auto;max-width:1200px;padding:20px}
.header{border-bottom:2px solid #ddd;justify-content:space-between;margin-bottom:30px;padding-bottom:15px}
.brand,.header{align-items:center;display:flex}
.brand{gap:15px}
.avatar{border-radius:50%;height:50px;object-fit:cover;width:50px}
.admin-badge{background:#ff4757;border-radius:20px;color:#fff;font-size:.9rem;font-weight:700;padding:5px 12px}
.upload-section{background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.05);margin-bottom:30px;padding:20px}
.form-row{display:flex;gap:15px;margin-bottom:15px}
.form-row input{border:1px solid #ccc;border-radius:8px;flex:1;font-size:1rem;padding:12px}
.submit-btn{background:#2ed573;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;padding:12px 24px}
.submit-btn:disabled{cursor:not-allowed;opacity:.6}
.waterfall-grid{display:flex;gap:20px;align-items:flex-start}
.masonry-column{flex:1;display:flex;flex-direction:column;gap:20px;width:0}
.masonry-column .skin-card{margin-bottom:0}
.skin-card{background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.08);break-inside:avoid;margin-bottom:20px;overflow:hidden;transition:transform .2s}
.skin-card:hover{transform:translateY(-5px)}
.card-info{padding:15px}
.card-info h3{align-items:flex-start;display:flex;font-size:1.1rem;gap:10px;justify-content:space-between;line-height:1.4;margin:0 0 15px}
.tier-tag{background:#eccc68;border-radius:4px;color:#2f3542;flex-shrink:0;font-size:.85rem;font-weight:700;padding:3px 8px;white-space:nowrap}
.download-btn{background:#1e90ff;border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:700;padding:12px;width:100%}
.download-btn:hover{background:#1c82e6}
.filter-section{display:flex;gap:15px;margin-bottom:25px}
.search-input{border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.02);flex:1;font-size:1rem;outline:0;padding:12px 18px;transition:all .2s}
.search-input:focus{border-color:#1e90ff;box-shadow:0 0 0 3px rgba(30,144,255,.1)}
.tier-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:12px 40px 12px 18px;border:1px solid rgba(0,0,0,.08);border-radius:10px;font-size:1rem;font-weight:500;color:#333;background-color:#fff;cursor:pointer;outline:0;min-width:150px;box-shadow:0 2px 6px rgba(0,0,0,.04);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:16px;transition:all .2s ease}
.tier-select:hover{border-color:rgba(0,0,0,.15);box-shadow:0 3px 8px rgba(0,0,0,.06)}
.tier-select:focus{border-color:#1e90ff;box-shadow:0 0 0 3px rgba(30,144,255,.12);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e90ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")}
@media (max-width:600px){.filter-section{flex-direction:column;gap:12px;padding:0 5px}
.form-row{flex-direction:column;gap:12px;margin-bottom:12px}
.form-actions{flex-direction:column-reverse;gap:10px}
.form-row input,.form-row select,.search-input,.tier-select{width:100%!important;min-width:unset!important;font-size:16px;padding:14px 18px}
.tier-select{padding-right:45px;background-position:right 18px center}
.skin-card{display:flex!important;flex-direction:row!important;align-items:stretch!important;min-height:130px;width:100%}
.img-wrapper{width:45%!important;flex-shrink:0!important;min-height:100%!important;position:relative}
.cover-img,.img-wrapper{border-radius:12px 0 0 12px!important}
.cover-img{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important;object-fit:cover!important}
.card-info{width:55%!important;flex-shrink:1!important;min-width:0!important;padding:12px;display:flex;flex-direction:column;justify-content:space-between}
.card-info h3{font-size:1rem;margin-top:0;margin-bottom:6px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{margin-bottom:8px}
.download-btn{margin-top:auto;padding:8px 10px;font-size:.9rem}
.new-tag,.uml-tag{top:6px;padding:2px 6px;font-size:.7rem}
.new-tag{left:6px}
.uml-tag{right:6px}
}
#toast-container{display:flex;flex-direction:column;gap:10px;left:50%;pointer-events:none;position:fixed;top:20px;transform:translateX(-50%);z-index:9999}
.toast-msg{animation:toastIn .3s cubic-bezier(.175,.885,.32,1.275) forwards;background:rgba(45,52,54,.95);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#fff;font-size:.95rem;line-height:1.5;opacity:0;padding:12px 24px;text-align:center;transform:translateY(-20px)}
@keyframes toastIn{to{opacity:1;transform:translateY(0)}
}
.toast-msg.fade-out{animation:toastOut .3s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(-20px)}
}
.admin-actions{border-top:1px dashed #eee;display:flex;gap:10px;margin-top:10px;padding-top:10px}
.delete-btn,.edit-btn{border:none;border-radius:6px;cursor:pointer;flex:1;font-size:.85rem;font-weight:700;padding:8px}
.edit-btn{background-color:#f1f2f6;color:#2f3542}
.delete-btn{background-color:#ff4757;color:#fff;opacity:.9}
.edit-btn:hover{background-color:#dfe4ea}
.delete-btn:hover{opacity:1}
.form-actions{display:flex;gap:15px}
.form-actions button{flex:1}
.cancel-btn{background:#f1f2f6;border:none;border-radius:8px;color:#2f3542;cursor:pointer;font-size:1rem;font-weight:700;padding:12px 24px;transition:background .2s}
.cancel-btn:hover{background:#dfe4ea}
.img-wrapper{position:relative;animation:skeleton-pulse 1.5s ease-in-out infinite;background-color:#f1f2f6;min-height:150px;overflow:hidden;width:100%;transition:min-height .3s ease}
@keyframes skeleton-pulse{0%{background-color:#f1f2f6}
50%{background-color:#dfe4ea}
to{background-color:#f1f2f6}
}
.cover-img{width:100%;height:auto;display:block;opacity:0;transition:opacity .5s ease-in-out}
.cover-img.loaded{opacity:1}
.img-wrapper:has(.cover-img.loaded){min-height:0;background-color:transparent;animation:none}
.uml-tag{position:absolute;top:10px;right:10px;background:rgba(255,71,87,.95);color:#fff;padding:4px 10px;border-radius:6px;font-size:.8rem;font-weight:700;z-index:10;backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.2);pointer-events:none}
.author-text{font-size:.85rem;color:#7f8c8d;margin-bottom:12px;display:flex;align-items:center}
.header-actions{display:flex;align-items:center;gap:15px}
.guide-btn{background:#f1f2f6;color:#2f3542;border:none;padding:6px 14px;border-radius:20px;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .2s}
.guide-btn:hover{background:#dfe4ea}
.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:10000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(5px)}
.lightbox img{max-width:90%;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.3);animation:zoomIn .3s cubic-bezier(.18,.89,.32,1.28)}
.lightbox-close{position:absolute;top:20px;right:30px;color:#fff;font-size:40px;font-weight:700;cursor:pointer;user-select:none}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:10000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(3px)}
.modal-content{background:#fff;width:90%;max-width:420px;padding:25px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);animation:zoomIn .3s cubic-bezier(.18,.89,.32,1.28)}
.modal-title{margin:0 0 10px 0;font-size:1.3rem;color:#2f3542}
.modal-desc{font-size:.95rem;color:#57606f;line-height:1.6;margin-bottom:20px}
.modal-links{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.modal-btn{display:block;text-align:center;text-decoration:none;padding:12px;border-radius:8px;font-weight:700;border:none;cursor:pointer;font-size:1rem;transition:opacity .2s}
.modal-btn:hover{opacity:.85}
.btn-lanzou{background:#1e90ff;color:#fff}
.btn-bilibili{background:#fb7299;color:#fff}
.btn-close{background:#f1f2f6;color:#2f3542;flex:1}
.modal-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #eee;padding-top:20px}
.checkbox-label{font-size:.9rem;color:#7f8c8d;cursor:pointer;display:flex;align-items:center;gap:5px}
@keyframes zoomIn{from{transform:scale(.9);opacity:0}
to{transform:scale(1);opacity:1}
}
.cover-img{cursor:zoom-in}
.card-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:10px}
.author-text{font-size:.85rem;color:#7f8c8d;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.download-count{font-size:.8rem;color:#ff4757;font-weight:700;background:rgba(255,71,87,.1);padding:4px 10px;border-radius:12px;flex-shrink:0}
.new-tag{position:absolute;top:10px;left:10px;z-index:10;pointer-events:none;color:#fff;padding:4px 12px;border-radius:6px;font-size:.8rem;font-weight:700;letter-spacing:1px;background-image:linear-gradient(135deg,#ff357a,#fff172,#2ed573,#1e90ff,#8e44ad,#ff357a);background-size:200% auto;animation:gradientShift 4s linear infinite,neon-pulse 2s ease-in-out infinite}
@keyframes gradientShift{0%{background-position:0 50%}
100%{background-position:200% 50%}
}
@keyframes neon-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6);transform:scale(1)}
50%{box-shadow:0 0 0 8px rgba(255,255,255,0);transform:scale(1.05)}
100%{box-shadow:0 0 0 0 rgba(255,255,255,0);transform:scale(1)}
}
.global-loading-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:99999;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.global-loading-overlay.active{opacity:1;visibility:visible}
.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.2);border-top-color:#2ed573;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}
.loading-text{font-size:1.1rem;font-weight:700;letter-spacing:1px}
@keyframes spin{to{transform:rotate(360deg)}
}
.download-btn.installed-btn{background:#95a5a6!important;color:#ecf0f1!important;cursor:not-allowed!important;box-shadow:none!important;transform:none!important;opacity:.8}