.category-popup{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:none;opacity:0;transition:opacity .3s ease}.category-popup.show{display:flex;opacity:1}.category-popup-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.category-popup-content{position:relative;width:100%;height:100%;background:#fff;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s ease}.category-popup.show .category-popup-content{transform:translateY(0)}.category-popup-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e5e5e5;background:#fff;position:sticky;top:0;z-index:10}.category-popup-close,.category-popup-search{background:none;border:none;padding:8px;cursor:pointer;color:#666;border-radius:8px;transition:background-color .2s ease}.category-popup-close:hover,.category-popup-search:hover{background-color:#f5f5f5}.category-popup-title{font-size:18px;font-weight:600;color:#333;margin:0}.category-popup-body{flex:1;overflow:hidden}.category-layout{display:flex;height:100%}.category-sidebar{width:40%;background:#f8f9fa;border-right:1px solid #e5e5e5;overflow-y:auto}.category-content{flex:1;overflow-y:auto;background:#fff}.category-list{padding:0}.category-item{display:flex;align-items:center;padding:8px 18px;cursor:pointer;transition:all .2s ease;border-bottom:1px solid #e5e5e5}.category-item:hover{background-color:#f0f0f0}.category-item.active{background-color:#fff3e0;border-right:3px solid #ff9800}.category-item-icon{width:34px;height:34px;margin-right:12px;display:flex;align-items:center;justify-content:center}.category-item-icon img{width:100%;height:100%;object-fit:cover;border-radius:4px}.category-item-text{font-size:14px;font-weight:500;color:#333}.category-item.active .category-item-text{color:#ff9800;font-weight:600}.subcategory-container{padding:10px}.subcategory-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:#999;text-align:center}.view-category-btn{display:flex;align-items:center;gap:8px;background:#ff9800;color:#fff;border:none;padding:9px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;margin-top:16px}.view-category-btn:hover{background:#f57c00;transform:translateY(-1px)}.view-category-btn:active{transform:translateY(0)}.view-category-btn svg{width:16px;height:16px}.placeholder-icon{color:#ddd}.subcategory-section{margin-bottom:24px}.subcategory-section-header{display:flex;align-items:center;justify-content:space-between;padding:12px 0;cursor:pointer;border-bottom:1px solid #e5e5e5}.subcategory-section-title{font-size:16px;font-weight:600;color:#333;margin:0}.subcategory-section-toggle{background:none;border:none;color:#666;cursor:pointer;transition:transform .2s ease}.subcategory-section.expanded .subcategory-section-toggle{transform:rotate(180deg)}.subcategory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:16px 0}.subcategory-item{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#333;transition:transform .2s ease}.subcategory-item:hover{transform:translateY(-2px)}.subcategory-item-image{width:80px;height:80px;border-radius:8px;margin-bottom:8px;background:#f5f5f5;display:flex;align-items:center;justify-content:center;overflow:hidden}.subcategory-item-image img{width:100%;height:100%;object-fit:cover}.subcategory-item-text{font-size:12px;text-align:center;line-height:1.3;font-weight:500}.category-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:#666}.spinner{width:24px;height:24px;border:2px solid #e5e5e5;border-top:2px solid #ff9800;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:12px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 480px){.category-sidebar{width:45%}.subcategory-grid{grid-template-columns:repeat(2,1fr);gap:2px}.subcategory-item-image{width:75px;height:75px}}