*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;}
body{background:#f7f7f7;color:#222;overflow:hidden;height:100vh;}

.left-sidebar{
  position:fixed;
  left:0;top:0;bottom:0;
  width:180px;
  background:#fff;
  border-right:1px solid #eee;
  transition:transform 0.3s ease;
  z-index:99;
  overflow-y:auto;
}
.left-sidebar.collapsed{transform:translateX(-180px);}
.sidebar-head{padding:20px 16px;border-bottom:1px solid #eee;}
.sidebar-title{font-size:22px;font-weight:bold;color:#222;}
.sidebar-nav{margin-top:12px;}
.nav-item{padding:12px 16px;font-size:16px;}
.nav-item.active{background:#e8f3ff;color:#1677ff;}

.toggle-btn{
  position:fixed;
  left:16px;
  bottom:32px;
  width:50px;height:50px;
  border-radius:50%;
  background:#222;color:#fff;
  border:none;font-size:22px;
  z-index:100;
  display:flex;align-items:center;justify-content:center;
}

.add-btn{
  position:fixed;
  right:16px;
  bottom:32px;
  width:50px;height:50px;
  border-radius:50%;
  background:#f53f3f;color:#fff;
  border:none;font-size:28px;
  z-index:100;
  display:flex;align-items:center;justify-content:center;
}

.main-wrap{
  padding-left:180px;
  height:100vh;
  transition:padding-left 0.3s ease;
  overflow:hidden;
}
.main-wrap.collapsed{padding-left:0;}
.page{display:none;height:100vh;padding:20px;overflow-y:auto;}
.page.active{display:block;}

.filter-row{
  margin:10px 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.filter-row select{
  padding:6px 8px;
  border-radius:6px;
  border:1px solid #ddd;
  font-size:15px;
}

/* 穿搭魔方：两行横向滚动 */
.cube-scroll-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.cube-row{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  gap:10px;
  padding:6px 4px;
  scrollbar-width:none;
}
.cube-row::-webkit-scrollbar{display:none;}

.cube-item{
  flex:0 0 auto;
  width:140px;
  height:140px;
  border-radius:8px;
  background:#eee;
  overflow:hidden;
}

.cube-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  decoding:async;
}

.mask{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);
  z-index:200;display:none;align-items:center;justify-content:center;
  padding:20px;
}
.mask.show{display:flex;}
.pop{
  background:#fff;border-radius:12px;width:100%;max-width:340px;
  padding:20px;
}
.pop-btn-row{display:flex;gap:10px;margin-top:16px;}
.pop-btn{flex:1;padding:12px;border:none;border-radius:8px;font-size:16px;}
.pop-btn.primary{background:#1677ff;color:#fff;}
.pop-btn.danger{background:#f53f3f;color:#fff;}
.pop-btn.gray{background:#eee;color:#333;}

.img-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;}
.img-grid-item{width:100%;aspect-ratio:1;background:#eee;border-radius:8px;overflow:hidden;}
.img-grid-item img{width:100%;height:100%;object-fit:cover;decoding:async;}

#fileInput{display:none;}